Jquery操作单选框选中状态

最新推荐文章于 2024-10-09 22:06:42 发布

原力大师刚

最新推荐文章于 2024-10-09 22:06:42 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xionggang1024/article/details/77652014

本文详细介绍了如何使用Jquery库来控制HTML单选框的选中状态，包括选择特定选项、切换选中状态以及批量操作。通过实例代码，读者可以快速掌握这一实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发中经常使用到单选框(radio)与多选框(checkbox)组件，需要对组件的状态进行设置和读取，下面看一段网上流行的操作代码：
<div class="cb-container">
<input type="radio" class="cb-radio" id="r1" name="rd" value="left"/>
<input type="radio" class="cb-radio cb-gap2" id="r2" name="rd" value="right"/>
<button id="btn" type="button" class="btn btn-primary cb-gap">left</button>
<button id="btn2" type="button" class="btn btn-primary cb-gap">right</button>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var radios = $(".cb-radio");
        $("#btn").click(function () {
            radios.eq(0).attr("checked", true);
            radios.eq(1).attr("checked", false);
        });
        $("#btn2").click(function () {
            radios.eq(0).attr("checked", false);
            radios.eq(1).attr("checked", true);
        });
    });
</script>
实际测试发现，只有第一次 点击后才能被选中。之后点击后单选框的选中状态将一直处于未选中状态
官网给出了明确的解释，在jquery1.6之后，对于checked，selected等进行状态改变时，需要使用的是prop()而不是attr(),于是我们我们将之前代码中的attr改变为prop后
<script type="text/javascript">
    $(document).ready(function () {
        var radios = $(".cb-radio");
        $("#btn").click(function () {
            radios.eq(0).prop("checked", true);
            radios.eq(1).prop("checked", false);
        });
        $("#btn2").click(function () {
            radios.eq(0).prop("checked", false);
            radios.eq(1).prop("checked", true);
        });
    });
</script>