jquery,显示/隐藏div,问题标签

我想知道是否有人可以帮忙。

基于点击复选框及其标签,我在显示/隐藏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的功能。 如果您点击文字,我无法勾选或取消选中复选框。


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

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

标签应该有'for'属性指向它应该控制的复选框的ID。

标签

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

上一篇: Jquery, Show/hide div, label for issue

下一篇: Check if checkbox is checked JavaScript