×

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

作者:Terry2022.07.19来源:Web前端之家浏览:3462评论:0
关键词:jsform

500.jpg

在平时项目开发中,对于表单中复选框的应用非常广泛,所以需要我们牢牢掌握它的一些基础知识点,今天我们来分享一个Javascript小应用:判断复选框是否选中的方法。一起来学下下吧!

Javascript判断复选框是否选中,下面通过例子来说明(现在有如下的一组复选框),看下效果图:

image.png

<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>

试试吧。

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/formjs20220719.html

网友评论文明上网理性发言 已有0人参与

发表评论: