输出选中的多选框的个数

原创 进步的小菜鸟 随笔 随笔 431阅读 2017-08-30 18:07:17 举报

<input type="checkbox" name="check" value="111" />
<input type="checkbox" name="check" value="222" />
<input type="checkbox" name="check" value="333" />
<input type="checkbox" name="check" value="444" /></br>
<input type="submit" class="checkbut" value="点击获取选中的个数" /></br>

方法1:
$(".checkbut").click(function(){
var checkedBox = $("input[name=check]");
var str = []; //设置为全局变量和局部变量结果不同
for(var i = 0 ; i<checkedBox.length; i++){ //先遍历,再判断
if(checkedBox.eq(i).is(":checked")){ //jquery方法用.eq(i) ////一定要加eq(i)!!!因为此时的checkedBox是个类数组
str.push(checkedBox.eq(i).val()) //str是数组所以用push,字符串用+=
}
}
alert(str.length)
})

方法2:
$(".checkbut").click(function(){
var checkedBox = $("input[name=check]:checked"); //先判断,再遍历
var str = [];
for(var i = 0 ; i<checkedBox.length; i++){
str.push(checkedBox.eq(i).val())
}
alert(str.length)
})

方法3:
$(".checkbut").click(function(){
var arr = [];
var items = document.getElementsByName("check"); //DOM对象
for(var i = 0; i<items.length; i++){
if(items[i].checked){ //DOM方法用[i] //一定要加[i]!!!因为此时的items是个数组
arr.push(items[i].value)
}
}
alert(arr)
})

评论 ( 4 )
最新评论
进步的小菜鸟 2F 2017-08-31 10:19:41 4F

对的,我对:checked这个选择器理解的不深,总忘记。其实这个特别好使。感谢!

进步的小菜鸟 1F 2017-08-31 10:17:12 3F

这个是先判断,再遍历。方法1是先遍历,再判断。不介意的话我编辑到文章里哈。感谢!

a63149300 2017-08-30 21:07:23 2F

$("input:checked").length;
用jquery的话,这样就行了

hugeannex 2017-08-30 19:10:09 1F

方法三:
$(".checkbut").click(function(){
var checkedBox = $("input[name=check]:checked");
var str = []; //设置为全局变量和局部变量结果不同
for(var i = 0 ; i<checkedBox.length; i++){ //先遍历,再判断
str.push(checkedBox.eq(i).val()) //str是数组所以用push,字符串用+=
}
alert(str.length)
})