一、前情提要

剛開始想做的效果是這樣：我操作了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單選框的選中與取消（超詳細講解！）

一、前情提要

二、案例解說

（1）講解一：

（2）講解二：

（3）講解三：

三、經驗積累

經驗一：

經驗二：

經驗三：

經驗五：

認知提升的方法

C#開源的兩款功能強大的錄屏神器

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

前端 Vue yarn.lock文件：詳解和使用指南

Wdatepicker日期控件的下載和詳細使用說明

radio單選框的選中與取消（超詳細講解！）

SQLServer + Mybatis插入數據後返回對應數據的主鍵

Font Awesome 入門使用

Maven中Missing artifact org.codehaus.jackson:jackson-mapper-asl:jar:1.9.13問題（已解決）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結