jquery，顯示/隱藏div，問題標籤

Question

我想知道是否有人可以提供幫助。

我在點擊複選框及其標籤時顯示/隱藏div有點困難。

如果我有標籤與複選框的ID一起，它會調用jQuery的兩倍，這說明，然後隱藏我想既可以顯示或隱藏在div（取決於當前的狀態是什麼）

的JS/Jquery的是在這裏：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    //hide the all of the element with class msg_body 
    $(".cancel_body").hide(); 
    //toggle the componenet with class msg_body 
    $(".cancel_head").click(function() 
    { 
    console.log('tewrststeg'); 
    $(this).next(".cancel_body").slideToggle(600); 

    }); 
    }); 

</script> 

選項1：

<div class="cancel_head"><input type="checkbox" name="reason" value="1" id="label_id"><label for="label_id">Unknown Issues</label></div> 
    <div class="cancel_body" style="display: none;"> 
    <ul> 
    <li><a href="#">Solution 1 here</a></li> 
    <li><a href="#">Solution 2 here</a></li> 
    <li><a href="#">Solution 3 here</a></li> 
    </ul> 
    </div> 

的問題與上述的是，它示出了，然後隱藏div的問題。或隱藏然後顯示。取決於當前可用的。

選項2：

<div class="cancel_head"><input type="checkbox" name="reason" value="1">Unknown Issues</div> 
    <div class="cancel_body" style="display:none;"> 
    <ul> 
    <li><a href="#">Solution 1 here</a></li> 
    <li><a href="#">Solution 2 here</a></li> 
    <li><a href="#">Solution 3 here</a></li> 
    </ul> 
    </div> 

的問題與上面的是，雖然文字是可以點擊的，與jQuery的功能工作。如果您點擊文字，我無法勾選或取消選中複選框。

Answer 1

我會爲您在這個checkbox的狀態的改變，而不是試圖進行點擊div時的操作：

$('input[type=checkbox]').change(function() { 
    if ($(this).attr("checked")) { 
     return; 
    } 
}); 

Answer 2

標籤應該有'for'屬性指向它應該控制的複選框的ID。

標籤