您的位置:首页 > Web前端 > JQuery

jquery操作checkbox或radio

2017-03-19 16:22 477 查看
一.复选框操作

1.1 首先看html代码

<div id="box">
<input type="checkbox" id="chk1" checked />chk1
<input type="checkbox" id="chk2" checked />chk2
<input type="checkbox" id="chk3" />chk3
<input type="checkbox" id="chk4" />chk4

</div>

1.2 操作checkbox的js代码

//复选框操作
//查找所有复选框
console.log($(":checkbox"));
console.log($("#box").find(":checkbox"));
//查找所有选中的复选框
console.log($(":checked"));
//查找所有未选中的复选框
console.log($(":checkbox:not(:checked)"));
//判断复选框是否被选中
console.log($("#chk1").is(":checked"));
//选中复选框
$("#chk3").prop("checked","checked");//注意1.4.4版本不支持prop方法
//取消选择复选框
$("#chk1").removeAttr("checked");

二、单选框操作

2.1 首相看html代码

<div id="box">
<input type="radio" id="rad1" checked /> rad1
<input type="radio" id="rad2" checked /> rad2
<input type="radio" id="rad3" /> rad3
<input type="radio" id="rad4" /> rad4

</div>

2.2操作radio的js代码

//单选框操作
//查找所有单选框
console.log($(":radio"));
//查找所有选中的单选框
console.log($(":radio").filter(":checked"));
//查找所有未选中的单选框
console.log($(":radio").not(":checked"));
//判断单选框是否被选中
console.log($("#rad1").is(":checked"));
//选中单选框
$("#rad3").prop("checked","checked");
//取消单选框选择
$("#rad1").removeAttr("checked");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: