ここに私のコードがあります:
実際にチェックされたチェックボックスをカウントし、<span class="counter"></span>
内に書き込みます。このコードはFirefoxでは機能しますが、Chromeでは機能しません。
Chromeでは、.select_allは必要なすべてのチェックボックスをオンにしますが、カウンターは更新しません。実際、.select_allのチェックを外すとカウンターが更新されますが、これは奇妙です。
重要な事実:.counter内の.Select_allチェックボックスをカウントしたくない
jQuery(document).ready(function($){
$(function() {
$('#general i .counter').text(' ');
var generallen = $("#general-content input[name='wpmm[]']:checked").length;
if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');}
})
$("#general-content input:checkbox").on("change", function() {
var len = $("#general-content input[name='wpmm[]']:checked").length;
if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
});
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false);
}
});
});
});
編集:コードのサンプルドキュメントは次のとおりです。 http://jsfiddle.net/8PVDy/1/
関数を使用してカウンターを更新できます:
function updateCounter() {
var len = $("#general-content input[name='wpmm[]']:checked").length;
if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');}
}
チェックボックスの状態が変更されたときにこの関数を呼び出します(selectAllチェックボックスを含む)
更新されたjsFiddleは次のとおりです。 http://jsfiddle.net/8PVDy/4/
$('input[type="checkbox"]:checked').length
この方法でできます
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
alert($('.test:checked').length);
});
});
使用したHTML
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="test" class="test" value=""/>
<input type="checkbox" name="checkAll" class="checkAll" value=""/>
お役に立てれば
チェック状態を更新するには、 jQuery.prop() 関数を使用します
コード:
$(function(){
$('#general i .counter').text(' ');
var fnUpdateCount = function() {
var generallen = $("#general-content input[name='wpmm[]']:checked").length;
console.log(generallen,$("#general i .counter") )
if (generallen > 0) {
$("#general i .counter").text('(' + generallen + ')');
} else {
$("#general i .counter").text(' ');
}
};
$("#general-content input:checkbox").on("change", function() {
fnUpdateCount();
});
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $("#general-content input:checkbox");
if (checkthis.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
fnUpdateCount();
});
});
デモ: フィドル
Select all-handlerを変更して、このようなサブカテゴリのチェックボックスのonchange関数をトリガーしました
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']");
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false);
}
// make sure to trigger the onchange behaviour for the checkboxes
$("#general-content input:checkbox").change();
});
})
それらをトリガーするよりきれいな方法があることを覚えているようですが、それを見つけることができません
上記のすべての回答で見つからなかったのは、質問がonChangeイベントと密接に結びついているため、クリックを効率的に聞く方法についての説明です。別のことは、質問がコードがJqueryのみにあるべきかどうかを指定していないということです。VanillaJSソリューションを追加することは良い考えだと思います。
ここに私が数えようとしているチェックボックスのHTMLリストがあります。質問をもう少し一般的な方法で承認し、さまざまな条件で簡単に適用できるようにしました。私はチェックボックスをグローバルに、そして各セクションごとに数えるつもりです。
<div class="wrapper">
<section class="list list-1">
<label for="id-11"><input type="checkbox" id="id-11"></label>
<label for="id-12"><input type="checkbox" id="id-12"></label>
<label for="id-13"><input type="checkbox" id="id-13"></label>
<label for="id-14"><input type="checkbox" id="id-14"></label>
<label for="id-15"><input type="checkbox" id="id-15"></label>
<label for="id-16"><input type="checkbox" id="id-16"></label>
<label for="id-17"><input type="checkbox" id="id-17"></label>
<label for="id-18"><input type="checkbox" id="id-18"></label>
<label for="id-19"><input type="checkbox" id="id-19"></label>
<label for="id-110"><input type="checkbox" id="id-110"></label>
<span class="list-score">Section 1: <span class="number">0</span></span>
</section>
<section class="list list-2">
<label for="id-21"><input type="checkbox" id="id-21"></label>
<label for="id-22"><input type="checkbox" id="id-22"></label>
<label for="id-23"><input type="checkbox" id="id-23"></label>
<label for="id-24"><input type="checkbox" id="id-24"></label>
<label for="id-25"><input type="checkbox" id="id-25"></label>
<label for="id-26"><input type="checkbox" id="id-26"></label>
<label for="id-27"><input type="checkbox" id="id-27"></label>
<label for="id-28"><input type="checkbox" id="id-28"></label>
<label for="id-29"><input type="checkbox" id="id-29"></label>
<label for="id-210"><input type="checkbox" id="id-210"></label>
<span class="list-score">Section 2: <span class="number">0</span></span>
</section>
<section class="list list-3">
<label for="id-31"><input type="checkbox" id="id-31"></label>
<label for="id-32"><input type="checkbox" id="id-32"></label>
<label for="id-33"><input type="checkbox" id="id-33"></label>
<label for="id-34"><input type="checkbox" id="id-34"></label>
<label for="id-35"><input type="checkbox" id="id-35"></label>
<label for="id-36"><input type="checkbox" id="id-36"></label>
<label for="id-37"><input type="checkbox" id="id-37"></label>
<label for="id-38"><input type="checkbox" id="id-38"></label>
<label for="id-39"><input type="checkbox" id="id-39"></label>
<label for="id-310"><input type="checkbox" id="id-310"></label>
<span class="list-score">Section 3: <span class="number">0</span></span>
</section>
<span class="total-score">Total: <span class="number">0</span></span>
</div>
jSマークアップは、.wrapper
div内のすべてのクリックをリッスンし、.wrapper
および各.list
セクションのコンテキストで選択された入力をカウントします。
const total = document.querySelector('.total-score .number')
document.querySelector('.wrapper').addEventListener('change', function(event) { // First we apply the ONLY one listener to do the listening for us - we don't need listener on each checkbox
const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length // We count all selected inputs in side the main wrapper.
total.innerHTML = numberAll // We update the total counter
const list = event.target.closest('.list') // We look and cache the closest section, wrapping the clicked checkbox element
const numberList = list.querySelectorAll('input[type="checkbox"]:checked').length // Once found, we start to count the number of selected checboxes under the section
list.querySelector('.list-score .number').innerHTML = numberList // We update the sectiona relevant counter
})
JSフィドルのライブ例を次に示します。 https://jsfiddle.net/mkbctrlll/yak4oqj9/159/
Vanilla JSでは、change
リスナーを各チェックボックスに適用すると、はるかに遅いソリューションになることに注意する必要があります。代わりに、いわゆるイベント委任を利用し、リスナーをラッピング要素またはドキュメント全体に適用する必要があります。
ここでは、リストの各入力ごとに変更をリッスンしている速度を自分で確認できます。
https://jsperf.com/change-listener-on-each-vs-event-delegation/1
遅いオプションのコード(比較のみ):
document.querySelector('.wrapper').addEventListener('change', function() {
const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length
total.innerHTML = numberAll
})
document.querySelectorAll('.list').forEach((list) => {
list.addEventListener('change', function() {
const numberAll = this.querySelectorAll('input[type="checkbox"]:checked').length
this.querySelector('.list-score .number').innerHTML = numberAll
})
})
jQueryでの私のソリューション:
$('.wrapper').change(function() {
const numberAll = $(this).find('input[type="checkbox"]:checked').length
total.innerHTML = numberAll
const $list = $(event.target).closest('.list')
const numberList = $list.find('input[type="checkbox"]:checked').length
$($list.find('.list-score .number')).html(numberList)
})
追伸私もベンチマークにjQueryソリューションを追加しようとしましたが、パフォーマンスは偽物のようでした。
これを試して。
$('.select_all').change(function() {
var num = $(this).find("input[name='wpmm[]']:checked").length;
$("#general .counter").html(num);
});