《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结...

<form>
<input type="radio" name="gender" id="man" value="男" />男 
<input type="radio" name="gender" id="woman" value="女" />女 
<br />
<input type="checkbox" name="math" id="math"/>数学
<input type="checkbox" name="english" id="english"/>英语
<input type="checkbox" name="chinese" id="chinese"/>语文
<br />
<select id="province">
<option value="beijing">北京option>
<option value="hubei">湖北省option>
<option value="hunan">湖南省option>
<option value="guangdong">广东省option>
select>
<input id="btnSubmit" type="submit" value="submit" />
form>

 

1. 判断radio是否被选中：

//可以通过判断radio被选中的个数长度是否为0
var len = $('input[name="gender"]:checked').length;
if(len){
    console.log('radio没有选择，请选择一个！');
}
//判断某个radio是否被选中
if($('#man:checked').length){
    console.log('你选择了男的radio');
}
//或者
if($('#man').is(':checked')){
    console.log('你选择了男的radio');
}

 

2. 设置radio选中：

//javascript方法：
document.getElementById("man").checked = true;
//jQuery的prop方法
$('#man').prop('checked', true);
//取消选中
$('#man').prop('checked', false);
//不建议使用以下方法
$('#man').attr('checked', true);

 

3. 获取radio被选中的值

$('input[name="gender"]:checked').val();
//或者
$('input[name="gender"][checked]').val();

 

4. 判断checkbox是否被选中：

//判断某个checkbox是否被选中，跟radio方法一样
if($('#math:checked').length){
    console.log('你选择了数学');
}
//或者
if($('input[name="math"]:checked').length){
    console.log('你选择了数学');
}
//或者
if($('#math').is(':checked')){
    console.log('你选择了数学');
}
//还有一种方法是使用javascript
if(document.getElementById("math").checked == true){
　　console.log('你选择了数学');
}
//注意：网上流传的如下这种判断方法是不恰当的，与jQuery版本有关
if($('#math').attr('checked') == true)
if($('#math').attr('checked') == undefined)
if($('#math').attr('checked') == 'checked')

 

5. 设置checkbox选中:

/***跟radio的方法一样***/
//javascript方法：
document.getElementById("math").checked = true;
//jQuery的prop方法
$('#math').prop('checked', true);
//取消选中
$('#math').prop('checked', false);
//不建议使用以下方法
$('#math').attr('checked', true);

 

6. select的取值、选中

//获取当前选中项的值

$("#province").val();

//获取当前选中项的text

$("#province").find("option:selected").text();

//设置value值为guangdong的项选中

$("#province").val('guangdong');

//设置text为广东的项选中

$(".selector").find("option[text='广东']").attr("selected",true);

 

转载于:https://www.cnblogs.com/boliang/p/5554593.html