HTML中把input check复选框为单选功能

有时候我们会遇到这样的需求,想要用多选框的方框,但是又想让它单选,有以下解决方案。

1.设置页面中input是同级元素时checkbox为单选:
html部分代码:



js部分代码:

    $(":checkbox").click(function(){
        $(this).attr("checked",true);//设置当前选中checkbox的状态为checked
        $(this).siblings().attr("checked",false); //设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
    });

2.设置页面中input不是同级元素时checkbox为单选:
html部分代码:


js部分代码:

$(':checkbox').each(function(){     //遍历页面中所有的checkbox
    $(this).click(function(){       //为页面中每一个checkbox设置点击事件
        if($(this).attr('checked')){ //如果有checkbox状态为选中
        $(':checkbox').removeAttr('checked'); //移除checked属性,改变checkbox状态为未选中(为页面中所有checkbox复选框添加设置)
        //$(':checkbox').attr('disabled','disabled'); //或者直接设置checkbox复选框为禁用(为页面中所有checkbox复选框添加设置)
        $(this).attr('checked','checked'); //为当前点击选中的checkbox复选框添加checked属性
      }
});
});



原文:https://blog.csdn.net/digua523/article/details/70184735 
 

你可能感兴趣的:(HTML,&,JavaScript)