Jquery, Show/hide div, label for issue

I'm wondering if anyone can help.

I'm having a little difficulty with showing/hiding a div based on a click on a checkbox and its label.

If I have label for along with the id of the checkbox, it calls the jquery twice, which shows and then hides the div I wish to either be shown or hidden (depending on what the current state is)

The JS/Jquery is here:

 <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>

Option 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>

The problem with the above is that it shows and then hides the div in question. Or hides and then shows. Depending on which is currently available.

Option 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>

The problem with the above is that although the text is clickable and works with the jquery function. I cannot get the checkbox to be checked or unchecked if you click the text.

---

我会检查复选框元素状态的变化，而不是尝试单击div时执行操作：

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

---

The label should have the 'for' attribute pointing to the id of the checkbox it is supposed to control.

Label

链接地址: http://www.djcxy.com/p/55794.html

上一篇: 复选框包含动态输入字段的动态表格

下一篇: jquery，显示/隐藏div，问题标签