我对jQuery很陌生,我认为这对你们很多人来说可能很容易,但我似乎无法让它发挥作用。如何显示复选框的数量以使值增大或减小。
我尝试了以下操作,但是span标记中的数字仍为0:http://jsfiddle.net/yunowork/NTwxc/
由于
答案 0 :(得分:5)
您应该收听change
事件:
$('input[type=checkbox]').on('change', function(){
var number = $('input[type=checkbox]:checked').length;
$('.totalchecked').text(number);
});
请注意val
用于获取/设置表单元素的值,因为应该使用其他元素,例如span元素,text
或html
方法。
答案 1 :(得分:0)
已选中的复选框数:
$(":checkbox:checked").length
http://api.jquery.com/checked-selector/
编辑:我在你的小提琴中看到你已经拥有了那个。我会把它留在那里,因为那实际上是“如何显示已选中复选框的数量”的答案......
问题在于您没有更新并希望查看已检查的数量。每当检查任何项目时,您都需要重新运行该功能。
$(":checkbox").change(function () {
// update the span with $(":checkbox:checked").length ...
});
答案 2 :(得分:0)
您不应该设置范围.val
,而应设置.text
。
此外,每次检查状态更改时都需要更新它。
function calc() {
$('.totalchecked').text($(':checkbox:checked').length);
}
$(calc);
$(':checkbox').change(calc);
答案 3 :(得分:0)
问题:.val()
仅适用于表单元素。要设置元素的内容,如果要插入HTML,请使用.text()
或.html()
。第二个问题是你需要注册一个监听器来“改变”事件。否则,该值将不会更新。
更新了解决方案:http://jsfiddle.net/NTwxc/4/
$("input[type=checkbox]").change(function(){
var number = $('input[type=checkbox]:checked').length;
$(".totalchecked").text(number);
});
顺便说一句,我个人更喜欢input[type=checkbox]
而不是:checkbox
。前者适用于CSS和jQuery。
答案 4 :(得分:0)
我们在这里!
$('input[type="checkbox"]').change(function() {
$('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
});