html，javascript，如何知道复选框更改状态

Question

我的目标是通过单击x2或单击xt来检查x2时显示divX2。当点击x2时，此功能正常工作，但单击xt时不起作用。请注意0​​事件处理程序x2中的行console.log("change x2");。当我clic 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>

Answer 1

你只需要调用.change（）来激发它。

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

Answer 2

的.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(); 
       } 
      }); 
     }) 

Answer 3

试试这个代码，它应该解决您的问题

$(function(){ 
 
      $(".checkbox").change(function(e){ 
 
      \t \t if($("#x2").is(":checked") || $("#xt").is(":checked")){ 
 
       \t $("#divX2").show(); 
 
       }else \t 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>

Answer 4

添加#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>