jQuery將點擊行爲綁定到匹配元素集合

我想爲每個複選框輸入添加一個jQuery處理程序，以便在更改其值時（通過直接點擊它們或通過單擊標籤綁定到他們通過「for」屬性），以true（或checked =「checked」）一個名爲「selected」的類被添加到父li元素。相反，當點擊事件取消選中複選框時，我想從li元素中刪除「selected」類。jQuery將點擊行爲綁定到匹配元素集合

<li class="section"> 
    <label class="left" for="my_ad_stacked">Left Label</label> 
    <input type="checkbox" name="my_ad_stacked" id="my_ad_stacked" value="true" /> 
    <label for="my_ad_stacked" class="description check ">label info goes here</label> 
</li>

我知道，如果我知道元素的ID或類，我可以使用$（ 'myElement'）。addClass（ '選擇'）和$（ 'myElement'）。removeClass（ '選擇' ）。我只是不確定如何將行爲，動態添加到所有複選框元素以及它們的「for」綁定標籤。

來源

2011-07-14 Scott B

我建議把標籤內的複選框：'<標籤= 「my_ad_stacked」><跨度類= 「左」>左標籤標籤信息在此處'然後您只需聽取複選框上的'change'事件。 –

$("input[type=checkbox]").change(function() { 
    $(this).closest("li").toggleClass("selected"); 
});

此結合一個change事件checkbox類型的每個input元件。當更改時，事件處理函數將運行，並切換最近的li元素上的selected類。

在事件處理程序中，this引用已更改的複選框，因此這適用於所有複選框（假設頁面上的所有複選框都有一個li元素祖先）。

這是一個example fiddle顯示這在行動。

來源

2011-07-14 19:05:38

+1爲toggleClass。甜！ –

toggleClass在這種情況下不可靠，您需要明確檢查複選框是否已選中，因爲不是每次點擊都會切換checkbox.checked。（請參閱下面的解決方案） –

@valipour - 我綁定了'change'事件，而不是'click'事件，所以它應該可以正常工作。看到我鏈接到的小提琴。 –

$(":checkbox, :checkbox + label").click(function() 
{ 
    var li = $(this).closest("li"); 
    var chk = $(this).parent().find(":checkbox"); 

    if(chk.is(":checked")) li.addClass("selected"); 
    else li.removeClass("selected"); 
});

來源

2011-07-14 19:05:03

$(':checkbox').change(function(){ 
    var $checkbox = $(this), 
     $li = $checkbox.parents('li'); 
    if($checkbox.is(':checked')){ 
     $li.addClass('selected'); 
    } else{ 
     $li.removeClass('selected'); 
    } 
});

Test it here »

來源

2011-07-14 19:06:38 Shef

jQuery將點擊行爲綁定到匹配元素集合

回答

相關問題