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

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

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

Answer 2

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

标签

Jquery，显示/隐藏div，标签问题

2 个答案: