在平时项目开发中，对于表单中复选框的应用非常广泛，所以需要我们牢牢掌握它的一些基础知识点，今天我们来分享一个Javascript小应用：判断复选框是否选中的方法。一起来学下下吧！
Javascript判断复选框是否选中，下面通过例子来说明（现在有如下的一组复选框），看下效果图：
<input type="checkbox" name="fruit" value="Web前端之家" />Web前端之家 <input type="checkbox" name="fruit" value="教程" />教程 <input type="checkbox" name="fruit" value="科技" />科技 <input type="checkbox" name="fruit" value="VUE" />VUE <button onclick="checkbox();">提交</button>
主要是看JS如何写，如下：
<script language="javascript">
function checkbox(){
var str=document.getElementsByName('fruit');
var strstrLen=str.length;
var checkVal='';
for (i=0;i<strstrLen;i++){
if(str[i].checked==true){
checkVal+=str[i].value+',';
}
}
if(checkVal==''){
console.log("请先选择复选框！");
}else{
console.log("复选框的值是："+checkVal);
}
}
</script>我们可以试试，选中哪个可以直接显示结果，如果没有点击选中会提示。看下完整的DEMO：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断复选框是否选中的方法 | Web前端之家www.jiangweishan.com</title>
<style>
div{
text-align:center;
height:100px;
line-height:100px;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="fruit" value="Web前端之家" />Web前端之家
<input type="checkbox" name="fruit" value="教程" />教程
<input type="checkbox" name="fruit" value="科技" />科技
<input type="checkbox" name="fruit" value="VUE" />VUE
<button onclick="checkbox();">提交</button>
</div>
<script language="javascript">
function checkbox(){
var str=document.getElementsByName('fruit');
var strstrLen=str.length;
var checkVal='';
for (i=0;i<strstrLen;i++){
if(str[i].checked==true){
checkVal+=str[i].value+',';
}
}
if(checkVal==''){
console.log("请先选择复选框！");
}else{
console.log("复选框的值是："+checkVal);
}
}
</script>
</body>
</html>大家可以预览看下效果。
注意
有的童鞋就问了，我只能点击复选框才能选中，那么我想点击整个标签（包含文字）都能选中怎么办呢？一共有两种方法，往下看吧！
方法一
其实很简单，我们用一个label标签包含起来就可以了，比如：
<label><input type="checkbox" name="fruit" value="Web前端之家" />Web前端之家</label>
这样点击文字也可以选中。
方法二
如果你不想用label包起来，也可以使用label用在后面文字上，然后用label的for属性，取值跟input的ID一个命名就可以了。如下：
<input type="checkbox" name="fruit" value="Web前端之家" id="web" /><label for='web'>Web前端之家</label>
这样的话，同样也可以点击文字选中整个标签。
上面两种方法，大家随便用，不过我比较喜欢第一种，也建议选这种，代码少点，没毛病吧。
最后我们可以看下优化过的DEMO吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断复选框是否选中的方法 | Web前端之家www.jiangweishan.com</title>
<style>
div{
text-align:center;
height:100px;
line-height:100px;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox" name="fruit" value="Web前端之家" />Web前端之家</label>
<label><input type="checkbox" name="fruit" value="教程" />教程</label>
<label><input type="checkbox" name="fruit" value="科技" />科技 </label>
<label><input type="checkbox" name="fruit" value="VUE" />VUE </label>
<button onclick="checkbox();">提交</button>
</div>
<script language="javascript">
function checkbox(){
var str=document.getElementsByName('fruit');
var strstrLen=str.length;
var checkVal='';
for (i=0;i<strstrLen;i++){
if(str[i].checked==true){
checkVal+=str[i].value+',';
}
}
if(checkVal==''){
console.log("请先选择复选框！");
}else{
console.log("复选框的值是："+checkVal);
}
}
</script>
</body>
</html>试试吧。
希望能够给大家带来帮助哟。
网友评论文明上网理性发言 已有0人参与
发表评论: