jq 如何获取多选框选中的值

最新推荐文章于 2022-07-27 10:49:09 发布

乡野码夫

最新推荐文章于 2022-07-27 10:49:09 发布

阅读量6.4k

点赞数 2

分类专栏： jq html

原文链接：https://www.cnblogs.com/xielong/p/8176241.html

版权

jq 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

html

24 篇文章 1 订阅

订阅专栏

jquery如何获取多选框选中的值，有两种方法

1、通过id获取是否选中（单个）
1）引入jquery文件
2）Html设计如下

<div>
    <span>运动类：</span>
    <div id="div1" style="position:relative;left:80px;margin-top:-16px;">
    <input type="checkbox" size="12" name="Sports" id="Pingpong"   value="1"/>乒乓球&nbsp;&nbsp;
    <input type="checkbox" size="12" name="Sports" id="Badminton"  value="2"/>羽毛球&nbsp;&nbsp;
    <input type="checkbox" size="12" name="Sports" id="Basketball" value="3"/>篮球&nbsp;&nbsp;
    <input type="checkbox" size="12" name="Sports" id="Billiards"  value="4"/>台球&nbsp;&nbsp;
    </div>
    <div id="div2" style="position:relative;left:80px;margin-top:10px;">
    <input type="button" value="提交1" onClick="SaveCheck1()"/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="提交2" onClick="SaveCheck2()"/>
    </div>       
</div>

3）js中获取方法（单个）

var SaveCheck1 = function(){
            //通过id获取多选框是否选中
            var pinpong = $('#Pingpong').is(":checked");
            var badminton = $('#Badminton').is(":checked");
            var basketball = $('#Basketball').is(":checked");
            var billiards = $('#Billiards').is(":checked");    
            //在控制台输出选中值
            console.log("乒乓球："+pinpong);
            console.log("羽毛球："+badminton);    
            console.log("篮球："+basketball);    
            console.log("台球："+billiards);                        
        }

2、通过name获取是否选中（一组）

1）引入jquery文件（如上）

2）Html设计（如上）

3）js获取选中值（一组）

var SaveCheck2 = function(){
            var arry = new Array();
            //循环所有选中的值
            $('input[name="Sports"]:checked').each(function(index, element) {
                //追加到数组中
                arry.push($(this).val());
            });
            //将数组元素连接起来转化为字符串
            var arrystr = arry.join(',');
            //输出到控制台
            console.log("选中值："+ arrystr);
        }

3、整个demo源码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何获取多选框选中的值</title>
    </head>
    <script src="jquery.min.js"></script>
     
    <script>        
        var SaveCheck1 = function(){
            //通过id获取多选框是否选中
            var pinpong = $('#Pingpong').is(":checked");
            var badminton = $('#Badminton').is(":checked");
            var basketball = $('#Basketball').is(":checked");
            var billiards = $('#Billiards').is(":checked");    
            //在控制台输出选中值
            console.log("乒乓球："+pinpong);
            console.log("羽毛球："+badminton);    
            console.log("篮球："+basketball);    
            console.log("台球："+billiards);                        
        }
        
        var SaveCheck2 = function(){
            var arry = new Array();
            //循环所有选中的值
            $('input[name="Sports"]:checked').each(function(index, element) {
                //追加到数组中
                arry.push($(this).val());
            });
            //将数组元素连接起来转化为字符串
            var arrystr = arry.join(',');
            //输出到控制台
            console.log("选中值："+ arrystr);
        }
        
    </script>
    <body>
        <div>
            <span>运动类：</span>
            <div id="div1" style="position:relative;left:80px;margin-top:-16px;">
            <input type="checkbox" size="12" name="Sports" id="Pingpong"   value="1"/>乒乓球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Badminton"  value="2"/>羽毛球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Basketball" value="3"/>篮球&nbsp;&nbsp;
            <input type="checkbox" size="12" name="Sports" id="Billiards"  value="4"/>台球&nbsp;&nbsp;
            </div>
            <div id="div2" style="position:relative;left:80px;margin-top:10px;">
            <input type="button" value="提交1" onClick="SaveCheck1()"/>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="提交2" onClick="SaveCheck2()"/>
            </div>       
        </div>    
    </body>
</html>