私はjqueryを使ってすべてのチェックボックスをチェック/チェック解除しようとしています。これで、親のチェックボックスをチェック/チェック解除することで、すべての子のチェックボックスが選択/選択解除され、親チェックボックスのテキストもcheckall/uncheckallに変更されます。
これで、親のチェックボックスを入力ボタンに置き換え、ボタンのテキストもcheckall/uncheckallに変更します。このコードは、誰でもコードを微調整してください....
$( function() {
$( '.checkAll' ).live( 'change', function() {
$( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
$( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
});
$( '.cb-element' ).live( 'change', function() {
$( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );
});
});
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
これを試してください。
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all');
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
これが私が見つけた最短の方法です(jQuery1.6 +が必要です)
HTML:
<input type="checkbox" id="checkAll"/>
JS:
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
入力タグにchecked属性を明示的に追加していない限り、jQuery 1.6以降では.attrをチェックボックスとして使用できません。
例 -
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
これを試してみてください。
HTML
<input type="checkbox" name="all" id="checkall" />
JavaScript
$('#checkall:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
HTML
<input type="checkbox" name="select_all" id="select_all" class="checkAll" />
ジャバスクリプト
$('.checkAll').click(function(){
if($(this).attr('checked')){
$('input:checkbox').attr('checked',true);
}
else{
$('input:checkbox').attr('checked',false);
}
});
これを試して:
$('.checkAll').on('click', function(e) {
$('.cb-element').prop('checked', $(e.target).prop('checked'));
});
e
はclick
を実行したときに生成されるイベントで、e.target
はクリックされた要素(.checkAll
)なので、クラス.cb-element
を持つ要素のプロパティchecked
をクラス.checkAll`の要素のプロパティのように置くだけで済みます。
シモンズ:私の悪い英語をすみません。
ボタンを使用してチェックボックスを切り替えるためのソリューション。jQuery1.9以降と互換性があります。 toogle-eventは使用できなくなりました 。
$('.check:button').click(function(){
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'check all' )
$(this).data('checked', checked);
});
Richard Garsideの短い答えに同意しましたが、prop()
で$(this).prop("checked")
を使用する代わりに、 checkbox のネイティブJSのchecked
プロパティを使用できます。
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
ここで最善の解決策フィドルをチェック
$("#checkAll").change(function () {
$("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
_tot = $(".cb-element").length
_tot_checked = $(".cb-element:checked").length;
if(_tot != _tot_checked){
$("#checkAll").prop('checked',false);
}
});
<input type="checkbox" id="checkAll"/> ALL
<br />
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
以下のコードは、ユーザーがすべてのチェックボックスを選択してからすべてのチェックボックスをオンにした場合に機能し、ユーザーがいずれかのチェックボックスを選択解除した場合はすべてのチェックボックスをオフにします。
$("#checkall").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
if($(".cb-element").length==$(".cb-element:checked").length)
$("#checkall").prop('checked', true);
else
$("#checkall").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox 1</br>
<input type="checkbox" class="cb-element" /> Checkbox 2</br>
<input type="checkbox" class="cb-element" /> Checkbox 3
これを試して
$(".checkAll").click(function() {
if("checkall" === $(this).val()) {
$(".cb-element").attr('checked', true);
$(this).val("uncheckall"); //change button text
}
else if("uncheckall" === $(this).val()) {
$(".cb-element").attr('checked', false);
$(this).val("checkall"); //change button text
}
});
恥知らずな自己宣伝: そのためのjQueryプラグインがあります 。
HTML:
<form action="#" id="myform">
<div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
<fieldset id="slaves">
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
<div><label><input type="checkbox"> Checkbox</label></div>
</fieldset>
</form>
JS:
$('#checkall').checkAll('#slaves input:checkbox', {
reportTo: function () {
var prefix = this.prop('checked') ? 'un' : '';
this.next().text(prefix + 'check all');
}
});
...これで完了です。
jQueryを使用してすべてを中間プロパティでチェック/チェック解除
getSelectedItems()メソッドを使用して配列内のチェック済みアイテムを取得する
ソース チェックボックスリストで、マスターチェックなしのすべてを選択/選択解除
HTML
<div class="container">
<div class="card">
<div class="card-header">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="selectAll"
id="masterCheck"
/>
<label class="form-check-label" for="masterCheck">
Select / Unselect All
</label>
</li>
</ul>
</div>
<div class="card-body">
<ul class="list-group list-group-flush" id="list-wrapper">
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item1"
id="item1"
/>
<label class="form-check-label" for="item1">
Item 1
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item2"
id="item2"
/>
<label class="form-check-label" for="item2">
Item 2
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item3"
id="item3"
/>
<label class="form-check-label" for="item3">
Item 3
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item4"
id="item4"
/>
<label class="form-check-label" for="item4">
Item 4
</label>
</li>
<li class="list-group-item">
<input
class="form-check-input"
type="checkbox"
value="item5"
id="item5"
/>
<label class="form-check-label" for="item5">
Item 5
</label>
</li>
<li class="list-group-item" id="selected-values"></li>
</ul>
</div>
</div>
</div>
jQuery
$(function() {
// ID selector on Master Checkbox
var masterCheck = $("#masterCheck");
// ID selector on Items Container
var listCheckItems = $("#list-wrapper :checkbox");
// Click Event on Master Check
masterCheck.on("click", function() {
var isMasterChecked = $(this).is(":checked");
listCheckItems.prop("checked", isMasterChecked);
getSelectedItems();
});
// Change Event on each item checkbox
listCheckItems.on("change", function() {
// Total Checkboxes in list
var totalItems = listCheckItems.length;
// Total Checked Checkboxes in list
var checkedItems = listCheckItems.filter(":checked").length;
//If all are checked
if (totalItems == checkedItems) {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", true);
}
// Not all but only some are checked
else if (checkedItems > 0 && checkedItems < totalItems) {
masterCheck.prop("indeterminate", true);
}
//If none is checked
else {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", false);
}
getSelectedItems();
});
function getSelectedItems() {
var getCheckedValues = [];
getCheckedValues = [];
listCheckItems.filter(":checked").each(function() {
getCheckedValues.Push($(this).val());
});
$("#selected-values").html(JSON.stringify(getCheckedValues));
}
});
あなたはこれを試すことができます
$('.checkAll').on('click',function(){
$('.checkboxes').prop('checked',$(this).prop("checked"));
});`
クラス.checkAll
は一括操作を制御するチェックボックスです
これを試して、
<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">
チェックボックスの現在の状態を確認するためにthis.checked
を使うことができます。
$('.checkAll').change(function(){
var state = this.checked; //checked ? - true else false
state ? $(':checkbox').prop('checked',true) : $(':checkbox').prop('checked',false);
//change text
state ? $(this).next('b').text('Uncheck All') : $(this).next('b').text('Check All')
});
$('.checkAll').change(function(){
var state = this.checked;
state? $(':checkbox').prop('checked',true):$(':checkbox').prop('checked',false);
state? $(this).next('b').text('Uncheck All') :$(this).next('b').text('Check All')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
すべてのチェックボックスをオン/オフにするには、以下のコードを試してください。
jQuery(document).ready(function() {
$("#check_uncheck").change(function() {
if ($("#check_uncheck:checked").length) {
$(".checkboxes input:checkbox").prop("checked", true);
} else {
$(".checkboxes input:checkbox").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>
これを試してください Demo Link
これを行う別の短い方法もあります。以下の例をご覧ください。この例では、すべてのチェックボックスがオンになっているかどうかにかかわらず、すべてのチェックボックスがオンになっています。
$("#check_uncheck").change(function() {
$(".checkboxes input:checkbox").prop("checked",$(this).is(':checked'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All
<br/>
<br/>
<div class="checkboxes">
<input type="checkbox" name="check" id="check" /> Check Box 1
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 2
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 3
<br/>
<input type="checkbox" name="check" id="check" /> Check Box 4
</div>
私はこの質問は古くからあると思いますが、ほとんどの人がチェックボックスを使っていることに気づきました。承認された回答はボタンを使用しますが、いくつかのボタンでは機能しません(例:ページの上部に1つ、下部に1つ)。だからここに両方を行う修正があります。
HTML
<a href="#" class="check-box-machine my-button-style">Check All</a>
jQuery
var ischecked = false;
$(".check-box-machine").click(function(e) {
e.preventDefault();
if (ischecked == false) {
$("input:checkbox").attr("checked","checked");
$(".check-box-machine").html("Uncheck All");
ischecked = true;
} else {
$("input:checkbox").removeAttr("checked");
$(".check-box-machine").html("Check All");
ischecked = false;
}
});
これにより、テキストとチェックボックスの値を変更するときに必要な数のボタンを持つことができます。私はe.preventDefault()
呼び出しを含めました。これはhref="#"
の部分が原因でページが先頭にジャンプするのを防ぐためです。
$(function () {
$('input#check_all').change(function () {
$("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
});
});
<script type="text/javascript">
function myFunction(checked,total_boxes){
for ( i=0 ; i < total_boxes ; i++ ){
if (checked){
document.forms[0].checkBox[i].checked=true;
}else{
document.forms[0].checkBox[i].checked=false;
}
}
}
</script>
<body>
<FORM>
<input type="checkbox" name="checkBox" >one<br>
<input type="checkbox" name="checkBox" >two<br>
<input type="checkbox" name="checkBox" >three<br>
<input type="checkbox" name="checkBox" >four<br>
<input type="checkbox" name="checkBox" >five<br>
<input type="checkbox" name="checkBox" >six<br>
<input type="checkbox" name="checkBox" >seven<br>
<input type="checkbox" name="checkBox" >eight<br>
<input type="checkbox" name="checkBox" >nine<br>
<input type="checkbox" name="checkBox" >ten<br> s
<input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)">
<input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)">
</FORM>
</body>
これは、親のチェックボックスをオンまたはオフにするために使用されるリンクです。すべての子のチェックボックスが選択および選択解除されます。
jquery checkすべてのチェックボックスのチェックを外すJqueryデモ付き
$(function () {
$("#select-all").on("click", function () {
var all = $(this);
$('input:checkbox').each(function () {
$(this).prop("checked", all.prop("checked"));
});
});
});
$(document).ready( function() {
// Check All
$('.checkall').click(function () {
$(":checkbox").attr("checked", true);
});
// Uncheck All
$('.uncheckall').click(function () {
$(":checkbox").attr("checked", false);
});
});
これをコードブロックに追加するか、ボタンをクリックしてください。
$('input:checkbox').attr('checked',false);