入力タイプチェックボックスは、すべてを閉じ、開いてクリックcilck全て

Question

場合、ID "T2" とID "T3" "T1" のIDに変更

<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

"T1" IDでクリックミス： Idは。あなたが.を追加する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>

として定義されより単純化されたバージョンについては

idセレクタintはあなたのセレクタに#代わりの.を追加することによって固定することができます前に、この

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

のような問題が#が欠けによるものですか。とにかく、セレクタを1つに組み合わせることで簡単にすることができます。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

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

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