【JavaScript】解决单选列选择问题

最新推荐文章于 2022-03-17 21:45:24 发布
最新推荐文章于 2022-03-17 21:45:24 发布
阅读量216 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangayang/article/details/87688797
版权

问题背景：上一天，朋友告诉我要调试一个php的前端页面，这个页面为25个人，每个人都有4个列，每列都是分为abcd单选的选择，需要每列能最多选择a,b,c,d的数量，她不怎么会，帮她滤清楚思路后写了个demo给她：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table tr td{
				border: 1px solid black;
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		 <table>
			 <tr>
			 		<th>姓名</th>
			 		<th>工作能力</th>
			 		<th>工作态度</th>
			 		<th>责任心</th>
			 		<th>团队协作</th>
			 </tr>
			 <tr>
				 <td rowspan="4">小1</td>
				<td><input type="radio" class="one_a" name="a" />a</td>
				<td><input type="radio" class="two_a" name="b"/>a</td>
				<td><input type="radio" class="three_a" name="c"/>a</td>
				<td><input type="radio" class="four_a" name="d"/>a</td>
			 </tr>
			 <tr>
				
				 <td><input type="radio" class="one_b" name="a"/>b</td>
				 <td><input type="radio" class="two_b" name="b"/>b</td>
				 <td><input type="radio" class="three_b" name="c"/>b</td>
				 <td><input type="radio" class="four_b" name="d"/>b</td>
			 </tr>
			 <tr>
			 	
				 <td><input type="radio" class="one_c" name="a"/>c</td>
				 <td><input type="radio" class="two_c" name="b"/>c</td>
				 <td><input type="radio" class="three_c" name="c"/>c</td>
				 <td><input type="radio" class="four_c" name="d"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="a"/>d</td>
			 <td><input type="radio" class="two_d" name="b"/>d</td>
			 <td><input type="radio" class="three_d" name="c"/>d</td>
			 <td><input type="radio" class="four_d" name="d"/>d</td>
			 </tr>
			 <tr>
			 	<td rowspan="4">小2</td>
			 <td><input type="radio" class="one_a" name="aa" />a</td>
			 <td><input type="radio" class="two_a" name="bb"/>a</td>
			 <td><input type="radio" class="three_a" name="cc"/>a</td>
			 <td><input type="radio" class="four_a" name="dd"/>a</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_b" name="aa"/>b</td>
			 	<td><input type="radio" class="two_b" name="bb"/>b</td>
			 	<td><input type="radio" class="three_b" name="cc"/>b</td>
			 	<td><input type="radio" class="four_b" name="dd"/>b</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_c" name="aa"/>c</td>
			 	<td><input type="radio" class="two_c" name="bb"/>c</td>
			 	<td><input type="radio" class="three_c" name="cc"/>c</td>
			 	<td><input type="radio" class="four_c" name="dd"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="aa"/>d</td>
			 <td><input type="radio" class="two_d" name="bb"/>d</td>
			 <td><input type="radio" class="three_d" name="cc"/>d</td>
			 <td><input type="radio" class="four_d" name="dd"/>d</td>
			 </tr>
			 <tr>
			 	<td rowspan="4">小3</td>
			 <td><input type="radio" class="one_a" name="aaa" />a</td>
			 <td><input type="radio" class="two_a" name="bbb"/>a</td>
			 <td><input type="radio" class="three_a" name="ccc"/>a</td>
			 <td><input type="radio" class="four_a" name="ddd"/>a</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_b" name="aaa"/>b</td>
			 	<td><input type="radio" class="two_b" name="bbb"/>b</td>
			 	<td><input type="radio" class="three_b" name="ccc"/>b</td>
			 	<td><input type="radio" class="four_b" name="ddd"/>b</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_c" name="aaa"/>c</td>
			 	<td><input type="radio" class="two_c" name="bbb"/>c</td>
			 	<td><input type="radio" class="three_c" name="ccc"/>c</td>
			 	<td><input type="radio" class="four_c" name="ddd"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="aaa"/>d</td>
			 <td><input type="radio" class="two_d" name="bbb"/>d</td>
			 <td><input type="radio" class="three_d" name="ccc"/>d</td>
			 <td><input type="radio" class="four_d" name="ddd"/>d</td>
			 </tr>
			 <tr>
			 	<td rowspan="4">小4</td>
			 <td><input type="radio" class="one_a" name="aaaa" />a</td>
			 <td><input type="radio" class="two_a" name="bbbb"/>a</td>
			 <td><input type="radio" class="three_a" name="cccc"/>a</td>
			 <td><input type="radio" class="four_a" name="dddd"/>a</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_b" name="aaaa"/>b</td>
			 	<td><input type="radio" class="two_b" name="bbbb"/>b</td>
			 	<td><input type="radio" class="three_b" name="cccc"/>b</td>
			 	<td><input type="radio" class="four_b" name="dddd"/>b</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_c" name="aaaa"/>c</td>
			 	<td><input type="radio" class="two_c" name="bbbb"/>c</td>
			 	<td><input type="radio" class="three_c" name="cccc"/>c</td>
			 	<td><input type="radio" class="four_c" name="dddd"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="aaaa"/>d</td>
			 <td><input type="radio" class="two_d" name="bbbb"/>d</td>
			 <td><input type="radio" class="three_d" name="cccc"/>d</td>
			 <td><input type="radio" class="four_d" name="dddd"/>d</td>
			 </tr>
			 <tr>
			 	<td rowspan="4">小5</td>
			 <td><input type="radio" class="one_a" name="a2" />a</td>
			 <td><input type="radio" class="two_a" name="b2"/>a</td>
			 <td><input type="radio" class="three_a" name="c2"/>a</td>
			 <td><input type="radio" class="four_a" name="d2"/>a</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_b" name="a2" checked="checked" />b</td>
			 	<td><input type="radio" class="two_b" name="b2" checked="checked" />b</td>
			 	<td><input type="radio" class="three_b" name="c2" checked="checked" />b</td>
			 	<td><input type="radio" class="four_b" name="d2" checked="checked" />b</td>
			 </tr>
			 <tr>
			 
			 	<td><input type="radio" class="one_c" name="a2"/>c</td>
			 	<td><input type="radio" class="two_c" name="b2"/>c</td>
			 	<td><input type="radio" class="three_c" name="c2"/>c</td>
			 	<td><input type="radio" class="four_c" name="d2"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="a2"/>d</td>
			 <td><input type="radio" class="two_d" name="b2"/>d</td>
			 <td><input type="radio" class="three_d" name="c2"/>d</td>
			 <td><input type="radio" class="four_d" name="d2"/>d</td>
			 </tr>
			 <tr>
			 <td rowspan="4">小6</td>
			 <td><input type="radio" class="one_a" name="a22" />a</td>
			 <td><input type="radio" class="two_a" name="b22"/>a</td>
			 <td><input type="radio" class="three_a" name="c22"/>a</td>
			 <td><input type="radio" class="four_a" name="d22"/>a</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_b" name="a22"/>b</td>
			 <td><input type="radio" class="two_b" name="b22"/>b</td>
			 <td><input type="radio" class="three_b" name="c22"/>b</td>
			 <td><input type="radio" class="four_b" name="d22"/>b</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_c" name="a22"/>c</td>
			 <td><input type="radio" class="two_c" name="b22"/>c</td>
			 <td><input type="radio" class="three_c" name="c22"/>c</td>
			 <td><input type="radio" class="four_c" name="d22"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="a22"/>d</td>
			 <td><input type="radio" class="two_d" name="b22"/>d</td>
			 <td><input type="radio" class="three_d" name="c22"/>d</td>
			 <td><input type="radio" class="four_d" name="d22"/>d</td>
			 </tr>
			 <td rowspan="4">小7</td>
			 <td><input type="radio" class="one_a" name="a221" />a</td>
			 <td><input type="radio" class="two_a" name="b221"/>a</td>
			 <td><input type="radio" class="three_a" name="c221"/>a</td>
			 <td><input type="radio" class="four_a" name="d221"/>a</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_b" name="a221"/>b</td>
			 <td><input type="radio" class="two_b" name="b221"/>b</td>
			 <td><input type="radio" class="three_b" name="c221"/>b</td>
			 <td><input type="radio" class="four_b" name="d221"/>b</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_c" name="a221"/>c</td>
			 <td><input type="radio" class="two_c" name="b221"/>c</td>
			 <td><input type="radio" class="three_c" name="c221"/>c</td>
			 <td><input type="radio" class="four_c" name="d221"/>c</td>
			 </tr>
			 <tr>
			 
			 <td><input type="radio" class="one_d" name="a221"/>d</td>
			 <td><input type="radio" class="two_d" name="b221"/>d</td>
			 <td><input type="radio" class="three_d" name="c221"/>d</td>
			 <td><input type="radio" class="four_d" name="d221"/>d</td>
			 </tr>
			 
			 
			 
			 
		 </table>
		
		 
		
		
		<script src="jquery-1.3.2.min.js"></script>
		<script>
			//7个人  3a 2b 1c 1d
			/* var  n=0;
			$("input").each(function(i,v){
				$(this).click(function(){
					if ($(this).attr("checked")) {
						n+=1;
					}else{
							n-=1;
					}
					console.log(n)

				})
				
				 
			}) */
		     $(function(){
					//循环取当前选中的b并置灰对应的所有a,b,c,d
					$(":checked").each(function(){
						$('input[name="' + $(this).attr("name") + '"]').removeClass().addClass("setCheckedB");
						$('input[name="' + $(this).attr("name") + '"]').attr("disabled",true);
					})
					var num = ['one_a','two_a','three_a','four_a','one_b','two_b','three_b','four_b','one_c','two_c','three_c','four_c','one_d','two_d','three_d','four_d'];
		            $.each(num,function (k,v) {
					//获取对应的行数据
					var str = v;
					var arr=str.split("_");
					var first = arr[0];
					var allStra = "."+first+"_a";
					var allStrb = "."+first+"_b";
					var allStrc = "."+first+"_c";
					var allStrd = "."+first+"_d";
		                $("."+v).click(function () {
		                    if(v == 'one_a' || v == 'two_a' || v == 'three_a' || v == 'four_a'){
							console.log("A",$("."+v+":checked").length)	
		                        if($("."+v+":checked").length> 2){
		                            alert('每列最多选择3个A');
		                             $("."+v).each(function (kk,vv) {
		                                if(!$(vv).attr("checked")){
		                                    $(vv).attr("disabled",true)
		                                }
		    
		                            }) 
		                        }else {
		                             $("."+v).each(function (kk,vv) {
		                                $(vv).attr("disabled",false)
		   
		                            }) 
		                        }
								//点击a时校验b,c,d							
								if($(allStrb+":checked").length< (2-1)){
		                            $(allStrb).removeAttr("disabled");
		                        }
								if($(allStrc+":checked").length< 1){
		                            $(allStrc).removeAttr("disabled");
		                        }
								if($(allStrd+":checked").length< 1){
		                            $(allStrd).removeAttr("disabled");
		                        }								
		                    }else if(v == 'one_b' || v == 'two_b' || v == 'three_b' || v == 'four_b'){
								console.log("b",$("."+v+":checked").length)	
								 
		                        if($("."+v+":checked").length>= 1){
		                            alert('每列最多选择2个B');
		                            $("."+v).each(function (kk,vv) {
		                                if(!$(vv).attr("checked")){
		                                    $(vv).attr("disabled",true)
		                                }
		    
		                            })
		                        }else {
		                            $("."+v).each(function (kk,vv) {
		                                $(vv).attr("disabled",false)
		    
		                            })
		                        }
								
								//点击b时校验a,c,d							
								if($(allStra+":checked").length< 3){
		                            $(allStra).removeAttr("disabled");
		                        }
								if($(allStrc+":checked").length< 1){
		                            $(allStrc).removeAttr("disabled");
		                        }
								if($(allStrd+":checked").length< 1){
		                            $(allStrd).removeAttr("disabled");
		                        }
		                    }else if(v == 'one_c' || v == 'two_c' || v == 'three_c' || v == 'four_c'){
		                        if($("."+v+":checked").length>= 1){
		                            alert('每列最多选择1个C');
		                            $("."+v).each(function (kk,vv) {
		                                if(!$(vv).attr("checked")){
		                                    $(vv).attr("disabled",true)
		                                }
		    
		                            })
		                        }else {
		                            $("."+v).each(function (kk,vv) {
		                                $(vv).attr("disabled",false)
		    
		                            })
		                        }
								
								//点击c时校验b,a,d							
								if($(allStra+":checked").length< 3){
		                            $(allStra).removeAttr("disabled");
		                        }
								if($(allStrb+":checked").length< (2-1)){
		                            $(allStrb).removeAttr("disabled");
		                        }
								if($(allStrd+":checked").length< 1){
		                            $(allStrd).removeAttr("disabled");
		                        }
		                    }else if(v == 'one_d' || v == 'two_d' || v == 'three_d' || v == 'four_d'){
		                        if($("."+v+":checked").length>= 1){
		                            alert('每列最多选择1个D');
		                            $("."+v).each(function (kk,vv) {
		                                if(!$(vv).attr("checked")){
		                                    $(vv).attr("disabled",true)
		                                }
		    
		                            })
		                        }else {
		                            $("."+v).each(function (kk,vv) {
		                                $(vv).attr("disabled",false)
		    
		                            })
		                        }
								
								//点击d时校验b,c,a							
								if($(allStra+":checked").length< 3){
		                            $(allStra).removeAttr("disabled");
		                        }
								if($(allStrb+":checked").length< (2-1)){
		                            $(allStrb).removeAttr("disabled");
		                        }
								if($(allStrc+":checked").length< 1){
		                            $(allStrc).removeAttr("disabled");
		                        }
		                    }
		    
		                })
		            })
		    
		        })
		</script>
	</body>
</html>

这个demo只有10个人，10个人选择为每个列相关3a2b1c1d，在最开始，使用拼接的方式获取了当次点击对应的是哪个列，并拼接处当次列对应的abcd的class，方便下边做校验判断用，代码直接贴下去就能用（自己下载jQuery包）

敲个锤子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用原生JavaScript获取单选按钮radio的选中值
candy_tity的博客
12-01 7854
主要原理就是遍历所有的单选按钮，当某个单选按钮选中的时候，将它对应的值传递给我们赋值的参数，并且跳出遍历循环。如果想知道如何使用jQuery来获取单选按钮的值，请点击这里。示例代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>获取单选按钮选中的值</title> </head> <b
javascript (链接单选)
limlimlim的专栏
12-25 635
http://www.w3.org/1999/xhtml">     链接单选             function IniEvent() {             var links = document.getElementsByTagName("a");             for (var i = 0; i                 links[i].o
js 列表选择
weixin_30853329的博客
05-02 574
首选定义数组，然后进行操作时遍历数组获取选中值 function getSelect(userId) { //var userId = userCheckBox.value; //标记删除还是添加 var isAdd = true; //如果已经存在,那么删除 ...
巩固一下 JS 可选 (?.)操作符号，原来函数也可以用可选写法，又学到了！
粉丝们务必加入微信粉丝群
06-11 601
作者：Ashish Lahoti 译者：前端小智 来源：CSS-Tricket 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 可选的链接?.操作符用于使用隐式空检查访问嵌套对象属性。 概述 如何使用null (null和undefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。 可以使用嵌套.
js <table>中点击一行中任意列数据，则可以让<checkbox>选中或者取消选中
雨陆聪辰的博客
04-18 6163
$(function () { $("#data_table tr:gt(0)").click(function () { console.log($(this).find(":checkbox").prop("checked")) if ($(this).find(":checkbox").prop("checked"))// 此处要用pro
js 获取选中某列的和遇到的一系列问题
雨陆聪辰的博客
05-28 404
今天对js 中datagrid 表获取多行选着后某列数字的和： 首先： var total = 0; var CHATNUM = easyDataGridSelectRows('datagrid', 'CHATNUM', ',');获取选中的每行中CHATNUM的值，然后用“,”分割； 然后： var Arr = '['+CHATNUM+']';将其转换成数组的样式，注意现在它
js实现单选功能
Polaris_best的博客
03-10 1633
js实现单选功能
JavaScript：radio单选框的控制
qq_31382201的博客
03-21 1937
不可编辑:$('td[cellname=emailSuffix] :radio' ).attr('disabled',true);取值：var emailsuffix = $("td[cellname=emailSuffix] input:checked").val(); $("input[id='H13'][value='首次印刷']").attr("checked",true); 改变radi...
js实现单选框的选择
dawuafang
08-09 573
整体功能：居住在海南选"是"，则城市默认选择"海口"；居住在海南选"否"，则不选城市；如果居住在海南选择了"是"，则城市选择除"海口"外的选择则弹出提示并选择海口，如果居住在海南选择了"否"，则城市选择海口时弹出提示且不能选择。这里有个小小优化，不选择海口且城市选择之前选择的，如何实现呢？ &lt;html&gt; &lt;head&gt; &a
JS单选、多选、限制选择以及选中交换位置功能的实现与原理
Muchen灬
09-02 1455
1、单选功能的实现 首先再onshow里面将所有列表添加一个 checked = false 属性 <!-- 单选功能 --> <view style="margin-top: 20rpx;"> <view class="section-title">单选功能</view> <view class="shape-list-box"> <view class="shape-list" v-for="(list,index)
js 单选、全选、反全选
weixin_34179968的博客
04-09 382
/** * 全选 * checkAll：是否全选 true...
jquery操作checked属性以及disabled属性的多种方法
jajavaja的专栏
03-17 748
http://www.jb51.net/article/51296.htm 这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下 下边两种写法没有任何区别 只是少了些代码而已... 复制代码代码如
JS实现单选、多选、全选、反选
热门推荐
胖大星的博客
08-17 1万+
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全选反选问题</title> <script type="text/javascript" src="jquery-1.4
javascript判断单选框是否选中
啊哈前端的专栏
01-05 6097
判断单选框是否选中 window.onload=function(){ var ganders=document.getElementsByName("gander"),length=ganders.length,i=0; for(;i<length;i++){ ganders[i].onclick=f
js单选多选和全选
m0_65878076的博客
03-17 2006
js里面选中和取消，一般用在购物车和数据保存之中，很方便的，有需要的小伙伴可以直接复制代码使用
JS: 复选框——ALL与A、B、C（选中ALL同时选中各子项）
weixin_30535913的博客
09-28 123
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css"> </style></head><body><input...
javascript简单布局实现单选按钮控件
小狼驿站
03-30 3953
主要是对最近学习的知识做练习，可以巩固提高！ 效果如下图： 代码如下： 单选控件 .radioD{ width: 300px; height: 300px; background: url(field.jpg) no-repeat; } .radioD li{ font-size: 18px; font-family: Ari
JavaScript编程精粹：解决常见问题
本书《JavaScript Cookbook》是Shelley Powers的作品，专注于帮助读者解决JavaScript编程中的常见问题。随着JavaScript在浏览器、服务器和移动环境中的广泛应用，其规模、范围和复杂度显著增加，解决这些问题变得...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值