jquery实现checkbox同组互斥实现单选

太过爱你忘了你带给我的痛 2023-06-19 05:26 35阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    	</head>
    	<body>
    		<input type="checkbox" value="gzs" name="bqbj" id="chk1"  onclick="gzs(this)">市级办件
    		<input type="checkbox" value="zgq" name="bqbj" id="chk2" onclick="zgq(this)">本区办件
    	</body>
    	<script>
    		function gzs(obj){
    			if(obj.checked){                     
            		//如果当前项被选中了,//则不能选择第二组
            		 $("#chk2").prop("checked",false);  
            	}
    		}
    		
    		function zgq(obj){
    			if(obj.checked){                     
    				//如果当前项被选中了,//则不能选择第二组
    				 $("#chk1").prop("checked",false);  
    			}
    		}
    	</script>
    </html>

截图示例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70][]

涉及到的jquery知识

//判断checkbox 是否选中  
    $("#id").is(":checked");//选中，返回true，没选中，返回false  
      
    //设置checkbox为选中状态  
    $("#id").prop("checked",true);  
      
    //设置checkbox为不选中状态  
    $("#id").prop("checked",false);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204171115871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTU1NDkw,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery实现checkbox同组互斥实现单选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

太过爱你忘了你带给我的痛/ 2023年06月19日 05:26/ 0 赞/ 36 阅读

相关 checkbox 实现互斥选择

// mutex 互斥 checkbox 互斥 / 互斥的原理。找到需要互斥的所有的元素。赋值 checked=false; 然后单独赋值 chec

r囧r小猫/ 2023年06月03日 11:59/ 0 赞/ 41 阅读

相关 ElementUI el-checkbox实现全选反选单选

一、概述先来看一下效果图 ![8dbcd72c55ff052910facb707005eab9.png][] 需求： 1. 每一种类型，可以全选，反选(一个都不选

痛定思痛。/ 2022年10月09日 02:35/ 0 赞/ 306 阅读

相关 el-checkbox-group全选、单选实现

页面结构： <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange

逃离我推掉我的手/ 2022年09月05日 01:46/ 0 赞/ 288 阅读

相关 jQuery实现的Checkbox“全选/全不选”

自己实现的checkbox的“全选/全不选”，只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可 / 全选/全不

- 日理万妓/ 2022年08月11日 03:22/ 0 赞/ 289 阅读

相关 easyui-tree 实现checkbox 单选

今天测试easyui-tree checkbox 的单选控制时发现，官方的tree属性中没有提供属性控制checkbox单选，这一点与easyui-datagrid不同，在网上

柔光的暖阳◎/ 2022年07月12日 07:46/ 0 赞/ 198 阅读

相关 jQuery实现CheckBox全选、全不选

`<!DOCTYPE html PUBLIC` `"-//W3C//DTD XHTML 1.0 Transitional//EN"` `"http://www.w3.org/T

悠悠/ 2022年06月14日 12:16/ 0 赞/ 263 阅读

相关 jQuery实现CheckBox全选、全不选

<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id=

喜欢ヅ旅行/ 2022年06月12日 00:17/ 0 赞/ 291 阅读

相关 JQuery实现checkbox全选和反选

function selectAll(){ //id=all是全选/反选的checkbox，判断是选中还是没选中 var isChecked=$

今天药忘吃喽~/ 2022年05月08日 11:26/ 0 赞/ 262 阅读

相关 Jquery实现一组复选框单选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

分手后的思念是犯贱/ 2021年07月24日 19:00/ 0 赞/ 675 阅读