html，javascript，如何知道复选框何时更改状态[重复]答案

【问题标题】：html, javascript, how to know when checkbox change state [duplicate]html，javascript，如何知道复选框何时更改状态[重复]
【发布时间】：2017-02-21 16:04:54
【问题描述】：

我的目标是在通过单击x2 或单击xt 选中x2 时显示divX2。这在单击x2 时工作正常，但在单击xt 时不起作用。注意x2 的change 事件处理程序中的console.log("change x2"); 行。当我单击 xt 时，x2 看起来已选中，但从未触发 change 事件。

$(function() {
  $("#xt").click(function() {
    var check = $(this).prop("checked");
    $(".mark").prop("checked", check);
  });

  $("#x2").change(function() {
    console.log("change x2");
    if ($(this).prop("checked")) {
      $("#divX2").show();
    } else {
      $("#divX2").hide();
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span><input name="xt" id="xt" type="checkbox" /> Check All</span></li>
  <li><span><input name="x1" id="x1" type="checkbox" class="mark" /> X1</span></li>
  <li><span><input name="x2" id="x2" type="checkbox" class="mark"/> X2</span></li>
  <li><span><input name="x3" id="x3" type="checkbox" class="mark"/> X3</span></li>
  <li><span><input name="x4" id="x4" type="checkbox" class="mark"/> X4</span></li>
</ul>
<div id="divX2" hidden="hidden">
  <h4>Mostrando X2</h4>
</div>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

你只需要调用 .change() 来触发它。

$(".mark").prop("checked", check).change();

【讨论】：

这里唯一有效的答案

【解决方案2】：

当您通过其他函数为他分配属性值时，.change 不会触发

change 事件仅在用户输入输入然后失去焦点时触发，

使用这个：

$(function (){
            $("#xt").click(function (){
                var check = $(this).prop("checked");
                $(".mark").prop("checked", check);
                if($(this).prop("checked")){
                    $("#divX2").show();
                }
                else if(!$("#x2").prop("checked")) {
                    $("#divX2").hide();
                }
            });

            $("#x2").change(function (){
                console.log("change x2");
                if($(this).prop("checked")){
                    $("#divX2").show();
                }
                else{
                    $("#divX2").hide();
                }
            });
        })

【讨论】：

【解决方案3】：

在更改事件中添加#xt

$("#x2, #xt").change(function() {

$(function() {
  $("#xt").click(function() {
    var check = $(this).prop("checked");
    $(".mark").prop("checked", check);
  });

  $("#x2, #xt").change(function() {
    console.log("change x2");
    if ($(this).prop("checked")) {
      $("#divX2").show();
    } else {
      $("#divX2").hide();
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span><input name="xt" id="xt" type="checkbox" /> Check All</span></li>
  <li><span><input name="x1" id="x1" type="checkbox" class="mark" /> X1</span></li>
  <li><span><input name="x2" id="x2" type="checkbox" class="mark"/> X2</span></li>
  <li><span><input name="x3" id="x3" type="checkbox" class="mark"/> X3</span></li>
  <li><span><input name="x4" id="x4" type="checkbox" class="mark"/> X4</span></li>
</ul>
<div id="divX2" hidden="hidden">
  <h4>Mostrando X2</h4>
</div>

【讨论】：

【解决方案4】：

试试这个代码，它应该可以解决你的问题

$(function (){
            $(".checkbox").change(function(e){
            		if($("#x2").is(":checked") || $("#xt").is(":checked")){
                	$("#divX2").show();
                }else	if((e.currentTarget.id === "x2" && $("#x2").is(":checked")) || (e.currentTarget.id === "xt" && $("#xt").is(":checked"))){
                    $("#divX2").show();
                }else{
                  $("#divX2").hide();
                }
              });
            });

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul>
   <li><span><input name="xt" id="xt" type="checkbox" class="checkbox"/> Check All</span></li>
   <li><span><input name="x1" id="x1" type="checkbox" class="checkbox mark" /> X1</span></li>
   <li><span><input name="x2" id="x2" type="checkbox" class="checkbox mark"/> X2</span></li>
   <li><span><input name="x3" id="x3" type="checkbox" class="checkbox mark"/> X3</span></li>
   <li><span><input name="x4" id="x4" type="checkbox" class="checkbox mark"/> X4</span></li>
</ul>
<div id="divX2" hidden="hidden">
   <h4>Mostrando X2</h4>
</div>

【讨论】：