html, javascript, как узнать, когда флажок изменения состояния

Question

Моя цель показать divX2, если x2 проверяется, нажив кнопку x2 или нажав на кнопку xt. Это отлично работает при нажатии x2, но не работает, когда нажата кнопка xt. Обратите внимание на строку console.log("change x2"); в обработчике события changex2. Когда я 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

.Кнопка не срабатывает, если вы назначили ему значение свойства с помощью другой функции

события изменения срабатывает только тогда, когда пользователь вводит на вход, а затем теряет фокус,

использование:

$(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>