一、前情提要
刚开始想做的效果是这样：我操作了checkbox复选框，radio单选框的状态会随之变化。进而引出一系列问题，如：1、radio单选框选中了如何取消，取消了如何再选中；2、当checkbox选中状态发生变化时触发事件；3、操作checkbox复选框，radio单选框如何做出相对应的改变
二、案例解说
直接给你们抛详细案例。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
小白学习
全选
选了
不选
未选
效果图：
（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