获取选中checkbox 的方法

第一种：用for循环遍历

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>
        <label for="hobby">Hobby: 
            <input type="checkbox" name="hobby" value="reading" />阅读 
            <input type="checkbox" name="hobby" value="climbing" />爬山 
            <input type="checkbox" name="hobby" value="running" />跑步 
            <input type="checkbox" name="hobby" value="fishing" />钓鱼 
            <input type="checkbox" name="hobby" value="cooking" />做饭 
            </br></br>
            <input type="button" value="Get Value" onclick="getValue()" />
        </label>
    </p>
<span></span>
<script>
function getValue(){
    var hobbies = document.getElementsByName("hobby");
    var value=[];
    for (i=0; i<hobbies.length; i++){
        if (hobbies[i].checked){
            value.push(hobbies[i].value);      
        }
    }
     
    $("span").text(value);;
}
 </script>
</body>
</html>

 第二种方法：用each遍历

复制代码
<script>
function getValue(){
    var hobbies = document.getElementsByName("hobby");
    var value=[];
    $.each(hobbies, function(i){     
    if (hobbies[i].checked) {
        value.push(hobbies[i].value)
    }
 });  
    
    $("span").text(value);;
}
 </script>
复制代码

 

posted @   华小电  阅读(344)  评论(0)  编辑  收藏  举报
相关博文：
·  Check if String is Happy
·  使用UNION实现mysql行列变化（二）
·  JQuery Checkbox 获取选中值 Checkbox选中个数【单选】
·  checkbox全选
·  jQuery判断checkbox是否选中的3种方法
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae