Javascript小应用：判断复选框是否选中的方法

作者：Terry2022.07.19来源：Web前端之家浏览：4558评论:0

关键词：js form

在平时项目开发中，对于表单中复选框的应用非常广泛，所以需要我们牢牢掌握它的一些基础知识点，今天我们来分享一个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>

试试吧。

希望能够给大家带来帮助哟。

赏您的支持是我们创作的动力！