jQuery --- 实现 checkbox 样式的单选框

　　早就想写点博客了一直懒着动最近发现一些写过的东西都不记得了，下决心把自己平时遇到的问题、得到的经验记录下来，希望能大家一点帮助

　　这是之前写的一个模态框要求单选但是要求radio的默认样式太难看了就想用checkbox + js 自己把它改成单选框如下：

　　html代码：

<div class="list-item">

    <input type="checkbox" id="1" value="">

    <label for="1">Dance of the Reed Pipes</label>

</div>

<div class="list-item">

    <input type="checkbox" id="2" value="">

    <label for="2">Dance of the Reed Pies</label>

</div>

<div class="list-item">

    <input type="checkbox" id="3" value="">

    <label for="3">Dance of the Reed Pipes</label>

</div>

<div class="list-item">

    <input type="checkbox" id="4" value="">

    <label for="4">Dance of the Reed Pipes</label>

</div>

<div class="list-item">

    <input type="checkbox" id="5" value="">

    <label for="5">Dance of the Reed Pipes</label>

</div>

　　js代码：

$(".list-item").click(function(){

     $(".list-item").find("input[type='checkbox']").prop("checked", false);//每次点击前，将所有checkbox置为 未选中

     var cobj = $(this).find("input[type='checkbox']");//当前点击的checkbox

     cobj.prop("checked", true);//将当前点击的checkbox置为选中状态

        //over

})

　　代码并不复杂挺简单的，如果想获取点击的id，只要再加一句

var itemId = cobj.attr("id");

　　这样就可以了

巴特西

jQuery --- 实现 checkbox 样式的单选框

最新文章

热门文章