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>