jq 如何獲取多選框選中的值

本文轉載自查看原文 2018-01-02 11:11 6986 javaScript

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);                        
        }

4）運行的結果

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);
        }

4）運行的結果

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js-多選框選中處理 JS獲取頁面復選框選中的值 layui 獲取radio單選框選中的值 vue系列之獲取多選框中被選中的值多組復選框選中獲取獲取select下拉框選中的的值 vue復選框選中值獲取 jsp獲取多選框組件的值獲取 input 單選框和多選框的值 js——獲取多選框、單選框的值