javascript - jQuery - 复选框不更新文本

Question

我目前正在根据选中的复选框返回一些文本。我添加了一个复选框来自动检查所有国家/地区，但不会返回任何文本。无法弄清楚我做错了什么。

这是代码和 fiddle :

HTML

<p><label><input type="checkbox" id="checkCountries" /> Check Countries</label></p>

<fieldset>
  <legend>Loads of checkboxes</legend>
  <p><label><input type="checkbox" value="1" /> USA</label></p>
  <p><label><input type="checkbox" value="2" /> Canada</label></p>
  <p><label><input type="checkbox" value="3" /> UK</label></p>
  <p><label><input type="checkbox" value="4" /> Spain</label></p>
  <p><label><input type="checkbox" value="10" /> Male</label></p>
  <p><label><input type="checkbox" value="11" /> Female</label></p>
</fieldset>
<div class="print"></div>
<div class="print2"></div>
<div class="print3"></div>
<div class="print4"></div>
<div class="print10"></div>
<div class="print11"></div>

和 jQuery

$("#checkCountries").change(function() {
  $("input[value='1']").prop('checked', $(this).prop("checked"));
  $("input[value='2']").prop('checked', $(this).prop("checked"));
  $("input[value='3']").prop('checked', $(this).prop("checked"));
  $("input[value='4']").prop('checked', $(this).prop("checked"));
});


$(document).ready(function() {
  $('.print').val($(this).is(':checked'));

  $('input[value="1"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print').text("USA is Checked"));
    } else {
      $('.print').empty();
    }
    $('.print').val($(this).is(':checked'));
  });
  $('input[value="2"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print2').text("Canada is Checked"));
    } else {
      $('.print2').empty();
    }
    $('.print2').val($(this).is(':checked'));
  });
  $('input[value="3"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print3').text("UK is Checked"));
    } else {
      $('.print3').empty();
    }
    $('.print3').val($(this).is(':checked'));
  });
  $('input[value="4"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print4').text("Spain is Checked"));
    } else {
      $('.print4').empty();
    }
    $('.print4').val($(this).is(':checked'));
  });
  $('input[value="10"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print10').text("Male is Checked"));
    } else {
      $('.print10').empty();
    }
    $('.print10').val($(this).is(':checked'));
  });
  $('input[value="11"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).attr("checked", $('.print11').text("Female is Checked"));
    } else {
      $('.print11').empty();
    }
    $('.print11').val($(this).is(':checked'));
  });
});

https://jsfiddle.net/gf28v9x5/3/

Answer 1

您需要显式触发更改事件。

请注意，更改事件仅由用户对该特定元素的操作触发。

我做了什么

仅在更改选中/取消选中时触发

$("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');

喜欢https://jsfiddle.net/4ktbjwL2/1/

$("#checkCountries").change(function () {
    $("input[value='1']").prop('checked', $(this).prop("checked")).trigger('change');
    $("input[value='2']").prop('checked', $(this).prop("checked")).trigger('change');
    $("input[value='3']").prop('checked', $(this).prop("checked")).trigger('change');
    $("input[value='4']").prop('checked', $(this).prop("checked")).trigger('change');
});


$(document).ready(function() {
    $('.print').val($(this).is(':checked'));
    
    $('input[value="1"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print').text("USA is Checked"));
        } else {
        $('.print').empty();
        }
        $('.print').val($(this).is(':checked'));        
    });
        $('input[value="2"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print2').text("Canada is Checked"));
        } else {
        $('.print2').empty();
        }
        $('.print2').val($(this).is(':checked'));        
    });
        $('input[value="3"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print3').text("UK is Checked"));
        } else {
        $('.print3').empty();
        }
        $('.print3').val($(this).is(':checked'));        
    });
        $('input[value="4"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print4').text("Spain is Checked"));
        } else {
        $('.print4').empty();
        }
        $('.print4').val($(this).is(':checked'));        
    });
        $('input[value="10"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print10').text("Male is Checked"));
        } else {
        $('.print10').empty();
        }
        $('.print10').val($(this).is(':checked'));        
    });
        $('input[value="11"]').change(function() {
        if($(this).is(":checked")) {
            $(this).attr("checked", $('.print11').text("Female is Checked"));
        } else {
        $('.print11').empty();
        }
        $('.print11').val($(this).is(':checked'));        
    });
});

    <p><label><input type="checkbox" id="checkCountries"/> Check Countries</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" value="1" /> USA</label></p>
        <p><label><input type="checkbox" value="2" /> Canada</label></p>
        <p><label><input type="checkbox" value="3" /> UK</label></p>
        <p><label><input type="checkbox" value="4" /> Spain</label></p>
        <p><label><input type="checkbox" value="10" /> Male</label></p>
        <p><label><input type="checkbox" value="11" /> Female</label></p>
    </fieldset>
    <div class="print"></div>
    <div class="print2"></div>
    <div class="print3"></div>
    <div class="print4"></div>
    <div class="print10"></div>
    <div class="print11"></div>