jq 如何获取多选框选中的值
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"/>乒乓球 <input type="checkbox" size="12" name="Sports" id="Badminton" value="2"/>羽毛球 <input type="checkbox" size="12" name="Sports" id="Basketball" value="3"/>篮球 <input type="checkbox" size="12" name="Sports" id="Billiards" value="4"/>台球 </div> <div id="div2" style="position:relative;left:80px;margin-top:10px;"> <input type="button" value="提交1" onClick="SaveCheck1()"/> <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"/>乒乓球 <input type="checkbox" size="12" name="Sports" id="Badminton" value="2"/>羽毛球 <input type="checkbox" size="12" name="Sports" id="Basketball" value="3"/>篮球 <input type="checkbox" size="12" name="Sports" id="Billiards" value="4"/>台球 </div> <div id="div2" style="position:relative;left:80px;margin-top:10px;"> <input type="button" value="提交1" onClick="SaveCheck1()"/> <input type="button" value="提交2" onClick="SaveCheck2()"/> </div> </div> </body> </html>
平时多记记,到用时才能看看,记录你的进步,分享你的成果