用js判断列表里面的checkbox是否勾选

本文介绍了一个简单的JavaScript实现方案,通过全选复选框控制一组复选框的状态,并在用户尝试提交前检查是否有至少一个选项被选中。此方法适用于网页表单中的职位选择场景。

要实现的功能如图所示:

  

全选的checkbox的js代码如下:

var status=true;
    function allselect(){
        
         
            var tags=document.getElementsByTagName("input");        
         for (i = 0; i < tags.length; i++)
         {        
          if (tags[i].type == "checkbox")
          {
           tags[i].checked=status;
          }
         }
         status=!status; 
         
    }  

当点击显示职位,申请选中职位,放入收藏夹时的js代码如下:

function panduan(){
         var gou=0;  
         var tags=document.getElementsByTagName("input");        
         for (i = 0; i < tags.length; i++)
         {        
            if (tags[i].type == "checkbox")
            { 
                if(tags[i].id!="Checkbox1"){                                       //这里的Checkbox1为全选checkbox
                   if(tags[i].checked==true){
                   gou++;
                   }
                }
            }
         } 
            if(gou==0){
                window.alert("请要在选择的职位前打勾!");  
                return false;
             }
            
    }

在JavaScript中,可以通过访问复选框元素的 `checked` 属性来判断该复选框是否被选中。通常的做法是使用 `document.getElementsByName()` 或 `document.querySelectorAll()` 方法获取所有具有相同 `name` 属性的复选框对象,然后遍历这些对象并检查它们的 `checked` 状态。 以下是一个完整的示例: ### 获取复选框并检查其状态 HTML部分: ```html <input type="checkbox" name="test" value="1"><span>1</span> <input type="checkbox" name="test" value="2"><span>2</span> <input type="checkbox" name="test" value="3"><span>3</span> <input type="checkbox" name="test" value="4"><span>4</span> <input type="checkbox" name="test" value="5"><span>5</span> <input type="button" value="提交" onclick="showCheckedValues()"> ``` JavaScript部分: ```javascript function showCheckedValues() { var checkboxes = document.getElementsByName("test"); var checkedValues = []; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { checkedValues.push(checkboxes[i].value); } } alert("选中的值: " + checkedValues.join(", ")); } ``` 上述代码中,`document.getElementsByName("test")` 用于获取所有 `name` 属性为 `"test"` 的复选框[^3]。接着,通过遍历这些复选框并检查它们的 `checked` 属性(如果为 `true`,表示已被选中),将选中的复选框的值存入数组 `checkedValues` 中,并通过 `alert()` 显示出来。 此外,还可以使用 `querySelectorAll()` 来选择所有的复选框,并结合 `forEach()` 进更现代的遍历方式: ```javascript function showCheckedValuesModern() { var checkboxes = document.querySelectorAll("input[name='test']"); var checkedValues = []; checkboxes.forEach(function(checkbox) { if (checkbox.checked) { checkedValues.push(checkbox.value); } }); alert("选中的值: " + checkedValues.join(", ")); } ``` 这种方法利用了 `querySelectorAll()` 提供的灵活性和 `forEach()` 的简洁性,使代码更加清晰易读。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值