Question

我有一个带有两个选项的复选框：

<label><input type="checkbox" value="Dogs">Dogs</label>
<label><input type="checkbox" value="Cats">Cats</label>

条件是，如果选中了Cats，则在该输入的标签后附加div：

jQuery("form").change(function() {

  if (jQuery('input[value="Cats"]').is(':checked')) {

     jQuery('input[value="Cats"]').parent('label').append('<div class="cats-notice">You love cats, nice one</div>');

  } else {

     jQuery(".cats-notice").remove();

  }

});

如果选择“猫”，则div追加。大。但是，如果随后选择了Dogs，它将再次追加div。取消选择狗，然后再次添加div，依此类推。狗为什么要参与其中？

n.b。在我的场景中，我无法[轻松地]将类或ID添加到输入中。

jQuery("form").change(function() {

  if (jQuery('input[value="Cats"]').is(':checked')) {
     jQuery('input[value="Cats"]').parent('label')
       .append('<div class="cats-notice">You love cats, nice one</div>');
  } else {
     jQuery(".cats-notice").remove();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
<label><input name="cats" type="checkbox" value="Cats"> Cats</label>
</form>

Fiddle

Answer 1

如果我理解正确的话，可能就是这样：

$(document).ready(function(){
        $('input[value="Cats"]').click(function(){
            if($(this).prop("checked") == true){
                jQuery('input[value="Cats"]').parent('label').append('<div class="cats-notice">You love cats, nice one</div>');
            }
            else if($(this).prop("checked") == false){
                jQuery(".cats-notice").remove();
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
<label><input name="cats" type="checkbox" value="Cats"> Cats</label>
</form>

Answer 2

选中Dogs复选框并取消选中它们都是窗体上的change，因此，当 Dogs或Cats复选框被切换时，您的更改功能将运行。

您的if-test希望查看是否选中了Cats复选框，如果选中，它会附加div。

因此，第一次检查Cats，更改被触发，测试发现Cats复选框已选中，并附加了div。到目前为止很好。

现在，“狗”复选框处于选中状态，这是一个更改，因此更改事件处理程序将运行。它进行测试以查看是否选中了Cats复选框，并且 它仍处于选中状态 ，因为切换Dogs复选框不会影响Cats复选框。

这就是为什么狗被“卷入”的原因。

目前尚不清楚您要想要发生什么—狗应该什么都不做吗？狗应该切换自己的自己 div吗？

您可以采取什么措施来阻止Dogs参与进来？

一种方法是，您可以使用event参数（现在不使用它）来查看正在处理的复选框。

jQuery("form").change(function(e) {
  if (e.target.name==="cats") {
    if (jQuery('input[value="Cats"]').is(':checked')) {
       jQuery('input[value="Cats"]').parent('label')
         .append('<div class="cats-notice">You love cats, nice one</div>');
    } else {
       jQuery(".cats-notice").remove();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
<label><input name="cats" type="checkbox" value="Cats"> Cats</label>
</form>

另一种方法是将处理程序仅附加到Cats复选框，而不附加表单（例如，GökselÖZER在另一个答案中，尽管我绑定到change事件，而不是click事件）

jQuery("input[name=cats]").change(function(e) {
    if (jQuery('input[value="Cats"]').is(':checked')) {
       jQuery('input[value="Cats"]').parent('label')
         .append('<div class="cats-notice">You love cats, nice one</div>');
    } else {
       jQuery(".cats-notice").remove();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
<label><input name="cats" type="checkbox" value="Cats"> Cats</label>
</form>

（请注意，我也喜欢代码中GökselÖZER所做的其他一些更改，但我尝试使我的代码尽可能地接近您的原始代码。）

此外，尽管您说“显示/隐藏” div，但实际上是在添加和删除div元素（每次都添加一个新元素），这与显示/隐藏现有元素不同。
您还说“我无法[轻松地]向输入中添加类或ID” –但是操作元素上的类并没有比您已经做的更多的工作。
问题是：您是否在编写Javascript以对某些无法控制的HTML和CSS起作用？如果您拥有的是HTML且不存在“ cats-notice” div，则别无选择，只能通过Javascript添加它，但如果您可以自己修改页面源代码，则可以轻松显示/隐藏现有的div。

$("form").change(function(e) {
    const section = e.target.name;
    $(`.${section}-notice`).toggleClass('active');
});

[class$="-notice"] {
    display: none;
}
.active {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
  <label><input name="cats" type="checkbox" value="Cats"> Cats</label>
</form>
<div class="cats-notice">You love cats, nice one</div>
<div class="dogs-notice">You love dogs, nice one</div>

Answer 3

您可以使用.cats-notice检查length div是否已附加：

jQuery("form").change(function() {
  if (jQuery('input[value="Cats"]').is(':checked') && jQuery(".cats-notice").length == 0) {
    jQuery('input[value="Cats"]').parent('label')
      .append('<div class="cats-notice">You love cats, nice one</div>');
  } else if (jQuery('input[value="Cats"]').is(':not(:checked)')) {
    jQuery(".cats-notice").remove();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label><input type="checkbox" value="Dogs">Dogs</label>
  <label><input type="checkbox" value="Cats">Cats</label>
</form>

Answer 4

只需稍微移动一下代码即可。如其他答案中所述，您是在更改表单时解雇的。因此，当您选择“狗”时，表格会更改，并且仍会检查是否选中了“猫”。

因此，当表格更改时，只需先删除猫的通知，然后再选中猫即可。

jQuery("form").change(function() {
   jQuery(".cats-notice").remove();
  if (jQuery('input[value="Cats"]').is(':checked')) 
     jQuery('input[value="Cats"]').parent('label').append('<div class="cats-notice">You love cats, nice one</div>');
});

Answer 5

我觉得您最容易做的就是这个

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form>
    <label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label>
    <label><input name="cats" type="checkbox" value="Cats"> Cats</label>
    </form>
    <script>
    jQuery('input[value="Cats"]').on("click", function(){
        if (jQuery('input[value="Cats"]').is(':checked')) {
            console.log('working')
        jQuery('input[value="Cats"]').parent('label')
            .append('<div class="cats-notice">You love cats, nice one</div>');
        } else {
        jQuery(".cats-notice").remove();
        }
    })


    </script>

您可以使用

代替表单更改

jQuery('input[value="Cats"]').on("click",function(){})

将来，如果要进行多个检查输入，可以使用输入类型检查，然后将其循环

如果选中复选框，则显示/隐藏div

5 个答案: