JS获取checkbox的个数简单实例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS获取checkbox的个数简单实例相关的知识，希望对你有一定的参考价值。
参考技术A JS获取多选框checkbox被选中的个数。var
checkbox
=
document.getElementsByName("likes[]");
//此处通过此种方式才能获得多选框为数组。
//like为name
=
"like[]"
,
获得时必须加上[]
var
checked_counts
=
0;
for(var
i=0;i<checkbox.length;i++)
if(checkbox[i].checked)
//被选中的checkbox
checked_counts++;
alert(checked_counts);
我做的是每点击一下多选框就判断当前checked个数是否超过某个数值
function
checkDate()
var
n
=
$("#cart_q_num").val();
var
checkedCount=0;
var
checkbox
=
document.getElementsByName("tie_in[]");
//alert(checkbox.length);
for(var
i=0;i<checkbox.length
;i
++)
if(checkbox[i].checked)
checkedCount++;
//alert(checkedCount);
if(checkedCount>n)
alert("The
quantity
of
the
gifts
should
equal
to
the
quantity
of
the
sunglasses
set.");
return
false;
else
$("#free_pro_selected_num").html(checkedCount);
要使函数checkdata()每次点击都发挥作用，需要在checkbox框中添加onclick事件：
<input
type="checkbox"
name="tie_in[]"
value="1"
onClick="return
checkData()"
/>
以上这篇JS获取checkbox的个数简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
js之radio应用实例
radio和checkbox还有select，可谓是前后端常用三剑客啊！特别是checkbox和select，关于这两个今天不讲，因为在下面这几篇文章，我已经比较详细的讲解了。
SpringMVC之ajax+select下拉框交互常用方式
今天主要讲解的是radio。
radio应用，主要应用是单选框，实际应用也很广，比如性别、身份认证(企业或者个人)、状态等等。
还是老规矩，代码实例讲解。
1.如何获得radio的值？
var isDefaultPlan = $("input[name=\'isDefaultPlan\']:checked").val();
通过上述代码就可以获得选中radio的值
2.radio如何赋值并选中?
if(data.resourceRatePlan.isDefault==1){
$(\'input:radio[name=isDefaultPlan][value="1"]\').attr("checked",true);
}else{
$(\'input:radio[name=isDefaultPlan][value="0"]\').attr("checked",true);
}
//当status的值为1时,相当于是关闭状态
if(data.resourceRatePlan.status==1){
$(\'input:radio[name=status][value="1"]\').attr("checked",true);
}else{
$(\'input:radio[name=status][value="0"]\').attr("checked",true);
}
上述代码即可实现
实际用途比较多的主要是取值和赋值。
从上面两个例子可以得出一个结论，就是都是通过jQuery选择器或者相关js判断来达到取值和赋值的目的。
jQuery本身就是js的封装。jQuery的宗旨，一直以来不变，就是那一句话:写的更少，做的更多。
jQuery教程可以参考:https://www.runoob.com/jquery/jquery-tutorial.html
另外我通常写博文也比较喜欢强调基础和原理。
下面进入，不用jQuery实现获取radio值，js和html代码示例如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <script> function check_radio(){ var chkObjs = document.getElementsByName("radio"); for(var i=0;i<chkObjs.length;i++){ if(chkObjs[i].checked){ alert(chkObjs[i].value); break; } } } </script> </head> <body> <form action=\'\' method=\'post\' onsubmit=\'javascript:return check_radio()\'> <input type=\'radio\' value=\'1\' name=\'radio\'>A <input type=\'radio\' value=\'2\' name=\'radio\'>B <input type=\'radio\' value=\'3\' name=\'radio\'>C <input type=\'radio\' value=\'4\' name=\'radio\'>D <input type=\'radio\' value=\'5\' name=\'radio\'>E <input type=submit value=sub > </form> </body> </html>
小结:领悟好javascript,对于jQuery将会更好的理解，或许以后就可以像贤心同志那样，写一个layui前端框架。当然了框架也不是那么好写，不过框架的本质就是那些基础的升级版。
以上是关于JS获取checkbox的个数简单实例的主要内容，如果未能解决你的问题，请参考以下文章