radio单选框的选中与取消（超详细讲解！）

快来打我* 2023-02-20 10:56 3393阅读 0赞

# 一、前情提要 #

刚开始想做的效果是这样：我操作了checkbox复选框，radio单选框的状态会随之变化。进而引出一系列问题，如：1、radio单选框选中了如何取消，取消了如何再选中；2、当checkbox选中状态发生变化时触发事件；3、操作checkbox复选框，radio单选框如何做出相对应的改变

# 二、案例解说 #

直接给你们抛详细案例。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>小白网页</title>
    </head>
    
    <body>
        <h1>小白学习</h1>
            <div>
                <input type="checkbox" name="habit" value="暴富"/>暴富<br>
                <a>-------------</a><br>
                <input type="checkbox" name="habit" value="脱单"/>脱单<br>
                <a>-------------</a><br>
                <input type="checkbox" name="habit" value="朝九晚五"/>朝九晚五<br>
                <a>-------------</a><br>
                <input type="checkbox" name="habit" value="浪迹天涯"/>浪迹天涯<br>
                <a>-------------</a><br><br>
            </div>
            <div>
            <label>
                <input type="radio" id="allSelect" name="select" value="allSelect"/> 全选  
            </label>
            <label>
                <input type="radio" id="selected" name="select" value="selected"/> 选了  
            </label>
            <label>
                <input type="radio" id="noSelect" name="select" value="noSelect"/> 不选  
            </label>
            <label>
                <input type="radio" id="waitSelect" name="select" value="noSelect" checked="checked"/> 未选  
            </label>
            </div>
        <script>
            $(function(){
                // 当habit多选框开始改变
                $("input[name='habit']").change(function(){
                    var habit = document.getElementsByName('habit');//获取所有的checkbox1标签对象。
                    var status = 0; // 1:选了; 2:不选
                    var allSelect = 1; // 1:全选; -1:。。。
                    for (var i = 0; i < habit.length; i++) {
                        var obj = habit[i];
                        if (obj.type == 'checkbox') {
                            if (obj.checked == false && status == 0) {
                                status = 2;//false且状态不变则表示【不选】
                            }else if(obj.checked == true){
                                status = 1;//出现true则表示【选了】，优先级：allSelect > status
                            }
                            if(obj.checked == false){
                                allSelect = -1;//循环过后没有false则默认【全选】
                            }
                        }
                    }
                    if(allSelect == 1){
                        document.getElementById("allSelect").checked = true;
                    }else if(status==1){
                        document.getElementById("selected").checked = true;
                    }else if(status==2){
                        document.getElementById("noSelect").checked = true;
                    }
                });
            });
    	
            $(document).ready(function(){
                // 处理radio单选框取消选中并能再次选中
                var old = null; //用来保存原来的对象
                $("input[name='select']").each(function(){//循环绑定事件
                    if(this.checked){
                        old = this; //如果当前对象选中，保存该对象
                    }
                    this.onclick = function(){
                        if(this == old){//如果点击的对象原来是选中的，取消选中
                            dealHabit('noSelect');//取消回归到原始状态（不选）
                            this.checked = false;
                            old = null;
                        } else{
                            dealHabit(this.value);
                            old = this;
                        }
                    }
                });
            });
            // 处理爱好复选框
            function dealHabit(status) {
                if(status == 'allSelect'){//【全选】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == false) {
                                inputs[i].checked = true;
                            }
                        }
                    }
                }else if(status == 'selected'){//【选了】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    var cbStatus = true;
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == false) {
                                cbStatus = false;
                            }else{
                                cbStatus = true;
                                break;
                            }
                        }
                    }
                    if(!cbStatus){
                        alert('骗鬼呢你，都没选！');
                        document.getElementById('selected').checked=false;//radio选框不选中
                    }
                }else if(status == 'noSelect'){//【不选】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == true) {
                                inputs[i].checked = false;
                            }
                        }
                    }
                }
            }
    	</script>
    </body>
    </html>

效果图：

![20200626155949598.png][]![20200626160021330.png][]![20200626160040840.png][]

### （1）讲解一： ###

当radio单选框点击（改变）时，触发的事件。同时通过循环绑定事件、保存对象的方法，实现了radio单选框取消选中并再次选中的效果。

$(document).ready(function(){
                // 处理radio单选框取消选中并能再次选中
                var old = null; //用来保存原来的对象
                $("input[name='select']").each(function(){//循环绑定事件
                    if(this.checked){
                        old = this; //如果当前对象选中，保存该对象
                    }
                    this.onclick = function(){
                        if(this == old){//如果点击的对象原来是选中的，取消选中
                            dealHabit('noSelect');//取消回归到原始状态（不选）
                            this.checked = false;
                            old = null;
                        } else{
                            dealHabit(this.value);
                            old = this;
                        }
                    }
                });
            });

### （2）讲解二： ###

dealHabit方法，事实上是处理当radio选择状态改变时，name=‘habit’ 的checkbox多选框选中状态发生相应变化的情况。

// 处理爱好复选框
            function dealHabit(status) {
                if(status == 'allSelect'){//【全选】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == false) {
                                inputs[i].checked = true;
                            }
                        }
                    }
                }else if(status == 'selected'){//【选了】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    var cbStatus = true;
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == false) {
                                cbStatus = false;
                            }else{
                                cbStatus = true;
                                break;
                            }
                        }
                    }
                    if(!cbStatus){
                        alert('骗鬼呢你，都没选！');
                        document.getElementById('selected').checked=false;//radio选框不选中
                    }
                }else if(status == 'noSelect'){//【不选】
                    var inputs = document.getElementsByName('habit');//获取所有的input标签对象。
                    for (var i = 0; i < inputs.length; i++) {
                        if (inputs[i].type == 'checkbox') {
                            if (inputs[i].checked == true) {
                                inputs[i].checked = false;
                            }
                        }
                    }
                }
            }

### （3）讲解三： ###

最后，就是处理当多选框发生改变时，radio单选框也随之改变的情况。此处有个问题一直卡着，就是如何同时判断三种不同的情况（全选、选了、未选）。我最后同时用了两个变量来进行判断，暂时没有想到更好的解决方案，如果读者们有想法欢迎留言讨论。

$(function(){
                // 当habit多选框开始改变
                $("input[name='habit']").change(function(){
                    var habit = document.getElementsByName('habit');//获取所有的checkbox1标签对象。
                    var status = 0; // 1:选了; 2:不选
                    var allSelect = 1; // 1:全选; -1:。。。
                    for (var i = 0; i < habit.length; i++) {
                        var obj = habit[i];
                        if (obj.type == 'checkbox') {
                            if (obj.checked == false && status == 0) {
                                status = 2;//false且状态不变则表示【不选】
                            }else if(obj.checked == true){
                                status = 1;//出现true则表示【选了】，优先级：allSelect > status
                            }
                            if(obj.checked == false){
                                allSelect = -1;//循环过后没有false则默认【全选】
                            }
                        }
                    }
                    if(allSelect == 1){
                        document.getElementById("allSelect").checked = true;
                    }else if(status==1){
                        document.getElementById("selected").checked = true;
                    }else if(status==2){
                        document.getElementById("noSelect").checked = true;
                    }
                });
            });

# 三、经验积累 #

### 经验一： ###

改变raido单选框选中状态的方法。

**方法一：attr**

$('#noSelect').attr('checked',true);
    $('#noSelect').attr('checked',false);
    
    // 还可直接remove掉：
    $('#noSelect').removeAttr("checked");

这种方法看上去没什么问题，但我在测试的时候发现，会出现效果只有一次的情况，第二次用就失效了。

拿上面的举例，将讲解三中的代码作如下修改后，选择（暴富），会跳转到【选了】，再点一下（暴富）就会取消选择，这时没有选择，radio单选框跳到【不选】，到目前似乎一切都很好，当然，因为是第一次。当我们第二次选择了（暴富）的时候，发现radio单选框的【选了】并没有勾上，这时候的问题就是很多博客在说的问题，取消选中单选框，再次选中却失效。

if(allSelect == 1){
            $('#allSelect').attr('checked',true);
            //document.getElementById("allSelect").checked = true;
        }else if(status==1){
            $('#selected').attr('checked',true);
            //document.getElementById("selected").checked = true;
        }else if(status==2){
            $('#noSelect').attr('checked',true);
            //document.getElementById("noSelect").checked = true;
        }

网上查到说，因为jquery1.7以上的版本用此方法只能第一次好用，第二次就会失效，可能是底层的JS代码发生了变动，不过有问题自然也有解决的方法，看接下来的方法二和方法三。

**方法二：prop**

换成这种后，就不会有上面失效的问题了。

$('#noSelect').prop('checked',true);
    $('#noSelect').prop('checked',false);

**方法三：原生DOM**

document.getElementById("noSelect").checked = true;
    document.getElementById("noSelect").checked = false;

这种方法用起来也没出现问题。棒！

### 经验二： ###

判断 checked 的几种方法。

**方法一：**

//版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
    $('#noSelect').attr('checked');

**方法二：**

// 版本1.6+ :true/false
    $('#noSelect').prop('checked');

**方法三：**

//所有版本:true/false
    $('#noSelect').is(':checked')

### 经验三： ###

获取所有选中的checkbox

$("input:checkbox:checked");//or
        $("input:[type='checkbox']:checked");//or
        $("input[type='checkbox']:checked");//or
        $("input:[name='habit']:checked");

### 经验五： ###

点击文字 checkbox、radio 自动选中：[https://blog.csdn.net/Alone\_in\_/article/details/100697752][https_blog.csdn.net_Alone_in_article_details_100697752]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

[20200626155949598.png]: https://img-blog.csdnimg.cn/20200626155949598.png
[20200626160021330.png]: https://img-blog.csdnimg.cn/20200626160021330.png
[20200626160040840.png]: https://img-blog.csdnimg.cn/20200626160040840.png
[https_blog.csdn.net_Alone_in_article_details_100697752]: https://blog.csdn.net/Alone_in_/article/details/100697752
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020062617273683.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70