有时需要在js中动态控制单选输入框的选中状态,这一般有两种方法:
1.通过设置input单选输入框的元素属性“checked”为“checked”,但需要注意的是,要把上一次设置的“checked”属性去掉,不然再次点击同一个元素的时候,选中状态就会错误。
2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。
下面通过一个例子来说明两种方法,这个例子要实现的效果是:点击表格某一行的任何地方(不只是点击单选框),此行就被选中,此时此行的单选框处于选中状态,右边一列文字变蓝色。如下图:
第一种方法:
html:
<body>
<div class="container">
<table border="1px">
<tr>
<td>选择</td>
<td>季节</td>
</tr>
<tr class="season">
<td><input name="season" type="radio" checked="checked"></td>
<td>春天</td>
</tr>
<tr class="season">
<td><input name="season" type="radio"></td>
<td>夏天</td>
</tr>
<tr class="season">
<td><input name="season" type="radio"></td>
<td>秋天</td>
</tr>
<tr class="season">
<td><input name="season" type="radio"></td>
<td>冬天</td>
</tr>
</table>
</div>
<script src="./set_radio_checked.js"></script>
</body>
</html>
<style>
.container{
margin:0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
table{
width: 50%;
}
tr > td:first-child{
width: 20%;
}
.checkedNode{
color:blue;
}
</style>
js
//上一次选中单选框索引
var preIndex = 0;
var seasonNodes;
(function(){
seasonNodes = document.querySelectorAll(".season");
seasonNodes[0].classList.add("checkedNode");
for(var i = 0;i < seasonNodes.length;i++){
addClickEvent(i);
}
})();
function addClickEvent(i){
seasonNodes[i].onclick = function(e){
clickRow(e,i);
};
}
function clickRow(e,index){
if(preIndex == index){
return
}
document.querySelectorAll(".season")[preIndex].classList.remove("checkedNode");
//设置下一个选中状态时,要记得移除上一个单选框元素"checked"属性
document.querySelectorAll(".season")[preIndex].querySelector("input").removeAttribute("checked");
e.currentTarget.classList.add("checkedNode");
//设置点击行单选框选中状态
e.currentTarget.querySelector("input").setAttribute("checked","checked");
preIndex = index;
}
第二种方法:
html同第一种方法
js与第一种方法有些许不同,在clickRow方法上:
var preIndex = 0;
var seasonNodes;
(function(){
seasonNodes = document.querySelectorAll(".season");
seasonNodes[0].classList.add("checkedNode");
for(var i = 0;i < seasonNodes.length;i++){
addClickEvent(i);
}
})();
function addClickEvent(i){
seasonNodes[i].onclick = function(e){
clickRow(e,i);
};
}
function clickRow(e,index){
if(preIndex == index){
return
}
document.querySelectorAll(".season")[preIndex].classList.remove("checkedNode");
//将上一次点击行的单选框DOM节点的checked属性置false
document.querySelectorAll(".season")[preIndex].querySelector("input").checked = false;
e.currentTarget.classList.add("checkedNode");
//将本次点击行的单选框DOM节点的checked属性置true
e.currentTarget.querySelector("input").checked = true;
preIndex = index;
}