如何點擊克隆的標籤並將複選框選中的屬性更改爲假＆單擊複選框並刪除克隆

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"); 
    } 
});