jQuery实现多个CheckBox只选中一个

最新推荐文章于 2021-11-17 10:26:17 发布

原创最新推荐文章于 2021-11-17 10:26:17 发布 · 1.1w 阅读

16 ·

CC 4.0 BY-SA版权

☆☆ Web前端同时被 2 个专栏收录

13 篇文章

订阅专栏

———— jQuery

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的单选CheckBox功能，确保在一组多个CheckBox中仅能选择一个选项，同时取消其他选项的选择状态，并更新了相关元素的样式。

多个CheckBox在表格同一框中，实现只能选中一个框，当选择其他框的时候，原来选中的框自动取消。

//监听原材料更改check框的click事件
jQuery("#field13848").click(function(){ 　
    checkBoxStatus("field13848");
});
 
jQuery("#field13849").click(function(){
   checkBoxStatus("field13849");
});
 
jQuery("#field13850").click(function(){
      checkBoxStatus("field13850");
});
 
//实现只能选中一个CheckBox框。
functioncheckBoxStatus(fieldId) {
    for (var i = 0; i < 3; i++) {
        var checkNum = 13848 + i;
        var checkStr = "field" +checkNum;
        if (jQuery("#field" +checkNum).attr('checked') == true) {
            if (checkStr != fieldId) {
                jQuery("#field" +checkNum).attr('checked', false);
               //修改span的class样式
                jQuery("#field" +checkNum).next().attr("class","jNiceCheckbox");
            }
 
        }
    }
}

jQuery(id).attr('checked', false);是将CheckBox的选中状态取消，但是只写这段不改变样式之后发现选中状态，仍然存在。后来发现还需要修改span的class属性。