如何点击克隆的标签并将复选框选中的属性更改为假＆单击复选框并删除克隆

Question

我有一个搜索过滤器，需要进行修改。应该发生的是，当您单击过滤器（复选框和单选按钮）时，相应标签的克隆将在标题部分中输出。然后当再次点击复选框或单选按钮时，标签应该消失。克隆标签也一样。当这被删除时，复选框应该将其属性更改为未选中状态。

两个并发症。 1）任何解决方案都必须使用jQuery 1.7 2）AJAX正在页面上使用。为了避免怪异现象（例如，在初次打开后立即再次滑动触发）我使用的是.one()，但这会导致只创建一次克隆。

所以我有两个问题。如何删除的复选框选中的属性点击克隆时，反之亦然

EXAMPLE of below code in action

$("section label").one("click", function() { 

    var clonedContent = $(this) 
    .first() 
    .clone() 
    .children() 
    .end() 
    .addClass("clone"); 
    $("header").append(clonedContent).addClass("clone"); 
}); 

$("header").on("click", ".clone", function() { 
    var forAttr = $(this).attr("for"); 
    console.log(forAttr); 
    // $(this).parents(".wrap").find(forAttr).removeClass("is-checked").siblings('input').prop('checked',false); 
    $(this) 
    .remove() 
    .parents(".wrap") 
    .find("section label") 
    .removeClass("is-checked"); 
}); 

$("section label").click(function() { 
    $(this).toggleClass("is-checked"); 
}); 

Answer 1

1. 当您使用label for="one"相应input应该有id="one"。否则标签不会像预期的那样改变输入的状态。

2. 你最好跟踪输入检查状态比点击。所以js会很简单。

请用以下内容替换您的HTML和JS：

<div class="wrap"> 
    <header></header> 
    <form> 
    <div class="label-wrap"><label for="one">Checkbox 1</label><input id="one" type="checkbox" /></div> 
    <div class="label-wrap"><label for="two">Checkbox 2</label><input id="two" type="checkbox" /></div> 
    <div class="label-wrap"><label for="three">Checkbox 3</label><input id="three" type="checkbox" /></div> 

    <p>note that &lt;input&gt; will be hidden eventually and replaced with a toggled :before</p> 
    </form> 
</div> 


$('input').on('change', function() { 
    var self = $(this); 
    if(self.is(':checked')) { 
    self.prev('label').clone().addClass("clone") 
    .appendTo("header"); 
    self.prev('label').addClass("is-checked"); 
    } else { 
    $('header label[for="' + self.attr('id') + '"]').replaceWith(''); 
    self.prev('label').removeClass("is-checked"); 
    } 
});