利用JS实现单选和复选，还有全选按钮

Naraseny

已于 2022-03-07 15:28:08 修改

阅读量3.1k

点赞数 1

分类专栏： JS html 文章标签： p2p linq gnu

于 2022-03-07 14:49:12 首次发布

本文链接：https://blog.csdn.net/qq_62881798/article/details/123329623

版权

JS 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- checked="checked"  控制单选  复选  选中 -->
	<input id="checkAll" type="checkbox">全选<br>
	<hr>
	<input name = 'hobby' type="checkbox" value = "撩妹子">撩妹子<br>
	<input name = 'hobby' type="checkbox" value = "撩汉子">撩汉子<br>
	<input name = 'hobby' type="checkbox" value = "打游戏">打游戏<br>
	<input name = 'hobby' type="checkbox" value = "玩文广">玩文广<br>
	<input name = 'hobby' type="checkbox" value = "锤康康">锤康康<br>


<script type="text/javascript">
	//1.根据id属性获取全选框 设置点击事件  拿到状态码
	var checkAll = document.getElementById('checkAll');
	// console.log(checkAll);
	checkAll.onclick = function(){
		// alert(123)
		console.log(this.checked);
		//获取除了全选框的所有子复选框
		//获取name属性为hobby的所有复选框
		var hobbys = document.getElementsByName('hobby');
		// console.log(hobbys);
		for(var i = 0;i<hobbys.length;i++){
			// console.log(hobbys[i].checked);
			hobbys[i].checked = this.checked;
		}
	};
	//完善全选
	//设置每个name属性为hobby的复选框的点击事件
	//当点击某一个时，需要获取所有的进行判断  是否全部选中，如果全部选中了  
//那么全选框就选中，但凡有一个没有选中了 那么全选就干掉了
	var hobbys = document.getElementsByName('hobby');
	//遍历
	for(var i = 0;i<hobbys.length;i++){
		//为每一个复选框设置点击事件
		hobbys[i].onclick = function(){
			var flag = true;//假设时全部选中的
			console.log(this.value);
			//获取所有的子复选框
			for(var i = 0;i<hobbys.length;i++){
				//只要有一个没有选中，那么全选就取消
				if(hobbys[i].checked == false){
					flag = false;
					break;
				}
			}
			checkAll.checked = flag;
		};
	}

试题例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>复选框选中效果</title>
<style type="text/css">
table {
	width: 400px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top:1px solid #666666;
	border-left:1px solid #666666;
}
td{
	font-size:12px;
	line-height:25px;
	text-align:center;
	border-right:1px solid #666666;
	border-bottom:1px solid #666666;
}
</style>
<script type="text/javascript">
function all_check(){
	var oInput=document.getElementsByName("ic");
 		for (var i=0;i<oInput.length;i++){
 			if (document.getElementById("all").checked==true){
 				oInput[i].checked=true;
 				}
 			else {
 				oInput[i].checked=false;
 				}
 			}
	}

function single_check(){
var oInput=document.getElementsByName("ic");
var j=0;
  for(var i=0;i<oInput.length;i++){
 	  if (oInput[i].checked==true){
 		   j=j+1;
 		 }
	}

   if(j==oInput.length){
	   document.getElementById("all").checked=true;
	  }
   else{
	   document.getElementById("all").checked=false;
	 }
}
</script>
</head>

<body><table border="0" cellspacing="0" cellpadding="0">
  <tr style=" font-weight:bold; ">
    <td><input id="all" type="checkbox" value="全选" onclick="all_check()" />全选</td>
    <td>产品名称</td>
    <td>价格（元）</td>
    <td>数量</td>
  </tr>
  <tr>
    <td><input name="ic" type="checkbox" value="诺基亚" onclick="single_check()" /></td>
    <td>诺基亚N85手机</td>
    <td>2589</td>
    <td>6</td>
  </tr>
  <tr>
    <td><input name="ic" type="checkbox" value="佳能" onclick="single_check()" /></td>
    <td>佳能IXUS95ISY数码相机</td>
    <td>1865</td>
    <td>5</td>
  </tr>
  <tr>
    <td><input name="ic" type="checkbox" value="戴尔"  onclick="single_check()"/></td>
    <td>戴尔新版SK8115键盘</td>
    <td>60</td>
    <td>56</td>
  </tr>
  <tr>
    <td><input name="ic" type="checkbox" value="联想" onclick="single_check()" /></td>
    <td>联想折叠式笔记本电脑桌</td>
    <td>59</td>
    <td>10</td>
  </tr>
   <tr>
    <td><input name="ic" type="checkbox" value="康佳" onclick="single_check()" /></td>
    <td>康佳32英寸液晶电视</td>
    <td>2945</td>
    <td>3</td>
  </tr>
   <tr>
    <td><input name="ic" type="checkbox" value="九阳"  onclick="single_check()"/></td>
    <td>九阳JYDX-78D五谷系列豆浆机</td>
    <td>299</td>
    <td>8</td>
  </tr>
   <tr>
    <td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;">删除选中的产品</td>
  </tr>
</table>

</body>
</html>

Naraseny

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
利用JS实现单选和复选，还有全选按钮

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input id="checkAll" type="checkbox">全选&l
复制链接

扫一扫