jq 如何获取多选框选中的值
程序员文章站
2022-07-13 23:02:38
...
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);
}
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"/>乒乓球
<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>