js动态设置单选输入框(radio)选中状态

最新推荐文章于 2024-11-15 18:05:45 发布

I_recluse

最新推荐文章于 2024-11-15 18:05:45 发布

阅读量1.6w

点赞数 3

分类专栏： javascript 文章标签：单选框选中状态 input type=radio 动态设置radio的选中状态

本文链接：https://blog.csdn.net/I_recluse/article/details/97431826

版权

javascript 专栏收录该内容

12 篇文章

订阅专栏

有时需要在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>

//上一次选中单选框索引
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;
}