js知识整理（⼋）---js中单选多选按钮的操作1.原结点:
性别:<input type="radio" name="sex" value="男" checked>男<br>
<input type="radio" name="sex" value="⼥">⼥<br>
2.单选框的按钮属性介绍
radio：单选框的类型
name ：取名称和分组，如果没有分组，可以选择多个
value：提交的数据
checked：设置默认值
3.js获取单选框value的值(即选中的值)
(1)获取所有的radio，获取的⽅法有很多，这边最好是⽤name来获取
var radioNodes = ElementsByName('sex');
(2)返回的是数组，要遍历拿到每个radio，然后根据checked属性进⾏判断是否被选中
(3)选中的话⽤value属性进⾏取值
for(var i =0; i < radioNodes.length; i++){
// 拿到每个radio
var rad = radioNodes[i];
// checked 进⾏判断如果选中返回true
if(rad.checked){
console.log(rad.value);
}
htmlradio设置默认的按钮
}
4.js获取多选框value的值(即选中的值)
爱好:<input type="checkbox" name="fav" value="swimming">游泳<br>
<input type="checkbox" name="fav" value="ps">爬⼭<br>
<input type="checkbox" name="fav" value="code">编码<br>
<input type="checkbox" name="fav" value="paly">打游戏<br>
<button onclick="getCheckBoxValues()">多选框js的操作</button>
(1)拿到所有的多选框
var cbs = ElementsByName('fav');
(2)拿到单个选项框，再进⾏判断处理
for(var i =0; i < cbs.length ; i++){
var  cb = cbs[i];
// 判断处理
if(cb.checked){
console.log(cb.value);
}
}
5.多选框实现全选，反选，取消操作
function cbcheckAll(){
// 拿到所有的多选框
var cbs = ElementsByName('fav');
// 拿到单个选项框
for(var i =0; i < cbs.length ; i++){
var  cb = cbs[i];
cb.checked =true;//全选
cb.checked =false;//取消
}
}
//反选
function cbcheckno(){
var ElementsByName("fav");
for(var a=0;a<cbs.length;a++){
var cb=cbs[a];
if(cb.checked){
cb.checked=false;
}else{
cb.checked=true;
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。