2017-02-21 19 views
0

Моя цель показать divX2, если x2 проверяется, нажив кнопку x2 или нажав на кнопку xt. Это отлично работает при нажатии x2, но не работает, когда нажата кнопка xt. Обратите внимание на строку console.log("change x2"); в обработчике события changex2. Когда я clic xt, x2 проверяется, но событие change никогда не запускается.html, javascript, как узнать, когда флажок изменения состояния

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

ответ

3

Вам просто нужно позвонить .change(), чтобы запустить его.

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

+0

Единственный действующий ответ здесь – empiric

0

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

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

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

$(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(); 
       } 
      }); 
     }) 
0

Попробуйте этот код, он должен решить вашу проблему

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

0

Добавить #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>