jquery：設置div隱藏/顯示與複選框檢查初始狀態

Question

我想隱藏divs時勾選相關複選框。

爲了讓它與複選框的初始jstate一起工作，我添加了triggerHandler（'click'）。

這適用於第一個複選框，但不適用於其他任何人。

有什麼建議嗎？

小提琴這裏：http://jsfiddle.net/tb5Yt/100/

非常感謝。

HTML

1<input type = "checkbox" id = "1" checked> 
2<input type = "checkbox" id = "2" > 
3<input type = "checkbox" id = "3" checked> 

<div class = "1"> 
    //Contains 1 elements remove when checked 
</div> 

<div class = "2"> 
    //Contains 2 elements remove when checked 
</div> 

<div class = "3"> 
    //Contains 3 elements remove when checked 
</div> 

jQuery的

$(document).ready(function() { 

$("input[type=checkbox]").click(function() 

{ 
    divId = $(this).attr("id"); 

    if ($(this).is(":checked")) { 
     $("." + divId).hide(); 
    } 
    else if ($(this).not(":checked")) { 
     $("." + divId).show(); 
    } 

}).triggerHandler('click'); 

}); 

Answer 1

首先你不應該做的else if部分。否則一個人會做。

秒我會嘗試調用同一選擇器上的點擊功能。請嘗試下面的代碼：

$(document).ready(function() { 

    $("input[type=checkbox]").change(function() 
    { 
     var divId = $(this).attr("id"); 

     if ($(this).is(":checked")) { 
      $("." + divId).hide(); 
     } 
     else{ 
      $("." + divId).show(); 
     } 

    }); 
    $("input[type=checkbox]").change(); 

});​ 

編輯：嘗試使用改變事件代替。 See this example.

Answer 2

您需要在頁面負載執行代碼，以及當點擊事件發生時，試試這個：

$("input[type=checkbox]") 
    .each(setDivs) // on load 
    .change(setDivs); // on click 

function setDivs() { 
    divId = $(this).attr("id"); 

    if ($(this).is(":checked")) { 
     $("." + divId).hide(); 
    } 
    else { 
     $("." + divId).show(); 
    } 
} 

您還會注意到我怎麼修改了else if條款簡單的else，並且還將click事件更改爲change，以允許用戶使用其鍵盤選擇選項。

Example fiddle

Answer 3

冒昧地修改代碼。

$(document).ready(function() { 
    function toggleDiv() { 
     var $this = $(this); 
     $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show'](); 
    } 
    $('input:checkbox').each(toggleDiv).click(toggleDiv); 
});​ 

http://jsfiddle.net/tb5Yt/123/