一、前情提要

刚开始想做的效果是这样：我操作了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"/> 全选 &nbsp;
        </label>
        <label>
            <input type="radio" id="selected" name="select" value="selected"/> 选了 &nbsp;
        </label>
        <label>
            <input type="radio" id="noSelect" name="select" value="noSelect"/> 不选 &nbsp;
        </label>
        <label>
            <input type="radio" id="waitSelect" name="select" value="noSelect" checked="checked"/> 未选 &nbsp;
        </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>

效果图：

（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

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