输入类型复选框cilck关闭所有并单击全部打开

Question

点击id“t1”时，id“t2”和id“t3”变为id“t1”

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>

<script>
  function check_all() {
    if (document.getElementById('t1').checked == true) {
      $(".t2").prop("checked", true);
      $(".t3").prop("checked", true);
    } else {
      $(".t2").prop("checked", false);
      $(".t3").prop("checked", false);
    }
  }
</script>

Answer 1

错字：我在dom中定义#。您正在添加.定义为类

function check_all() {
  if (document.getElementById('t1').checked == true) {
    $("#t2").prop("checked", true);
    $("#t3").prop("checked", true);
  } else {
    $("#t2").prop("checked", false);
    $("#t3").prop("checked", false);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>

更简化版本这样做

function check_all() {
$("#t2,#t3").prop("checked", $('#t1').is(':checked'));
  }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>

Answer 2

问题是由于在#选择器int之前缺少id，因此可以通过在选择器中添加#而不是.来修复此问题。无论如何，通过将选择器合并为一个可以使其变得更简单，并且可以使用if属性值作为prop()方法中的参数来替换checked条件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>

<script>
  // bind change event handler or use inline onchange 
  // where pass the reference(this) as argument
  $('#t1').change(function() {
    // get both element and update property based on the 
    // current value of t1 checkbox
    $('#t2,#t3').prop('checked', this.checked);
  })
</script>

Answer 3

＆＃13;

＆＃13;

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;