JS复选框操作技巧-CSDN博客

本文介绍了使用JavaScript操作HTML中的复选框元素的方法，包括如何获取已选中的复选框值以及实现全选功能。通过具体示例展示了如何编写简单的JavaScript函数来控制复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS获取复选框的值

function getCheckAdIds() {  
    var adIds = "";  
    $("input:checkbox[name=check_name]:checked'").each(function(i){  
        if(0==i){  
            adIds = $(this).val();  
        }else{  
            adIds += (","+$(this).val());  
        }  
    });  
    alert(adIds);  
    return adIds;  
}

JS实现全选

http://blog.csdn.net/sunwei3160/article/details/38515187

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js点击checkbox实现全选效果</title>
<script type="text/javascript">
    function DoCheck() {
        var ch = document.getElementsByName("choose");
        if (document.getElementsByName("allChecked")[0].checked == true) {
            for (var i = 0; i < ch.length; i++) {
                ch[i].checked = true;
            }
        } else {
            for (var i = 0; i < ch.length; i++) {
                ch[i].checked = false;
            }
        }
    }
</script>
</head>

<body>
    请选择爱好：
    <br />
    <input type="checkbox" name="choose">跳舞
    <input type="checkbox" name="choose">跳水
    <input type="checkbox" name="choose" />跳棋
    <input type="checkbox" name="choose" />跑步
    <br />
    <input type="checkbox" name="allChecked" id="allChecked"
        onclick="DoCheck()" />全选/取消
</body>
</html>

//一个或者多个没选，则全选按钮不被选中,全选之后则全选按钮自动选中
     function SelectOne(dh2){
         var selCount = 0;
         var unSelCount = 0;
         var ch = document.getElementsByName(dh2);
         var all=document.getElementsByName(dh2)[0];
         for(var i=1;i<ch.length;i++){
             if(ch[i].checked==true){
              selCount++;
             }
             if(ch[i].checked==false){
              unSelCount++;
             }
             if(selCount==ch.length-1){
              all.checked=true;
             }
             if(unSelCount>0){
              all.checked=false;
             }
        }
     }

转载于:https://www.cnblogs.com/miye/p/8533764.html