Question

我的目标是在$(document).ready(function() { $('.blue').on('click', function(e) { var upload = $(e.currentTarget).data('target1'); var download = $(e.currentTarget).data('target2'); var price = $(e.target).parent().find('.price').data('price'); // add a new class 'summary' for all 'summary id div'. // loop over all '.summary' class and add 'hide' class $('.summary').each(function(index, item) { // console.log(item); $(item).removeClass('hide').addClass('hide'); }); $(upload).removeClass('hide'); $(download).removeClass('hide'); $('#price').text(price); }); });点击divX2或点击x2时显示x2。单击xt时效果正常但单击x2时无法正常工作。请注意xt console.log("change x2");事件处理程序中的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();
    }
  });
})

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

试试这段代码，它应该解决你的问题

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

将#xt添加到更改事件

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: