Jquery操作单选框选中状态

前端开发中经常使用到单选框(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>