如何实现全选按钮和多选按钮

最新推荐文章于 2023-03-29 10:52:18 发布

一起看云海

最新推荐文章于 2023-03-29 10:52:18 发布

阅读量3.7k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/u012992462/article/details/39580903

版权

js 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实例

<html>
<head>
</head>
<body>
<input name="id_all" id="id_all" οnclick="quanxuan()" type="checkbox" value="" /><label>全选</label><br>
<input name="xuhao" id="a" type="checkbox">aaa<br>
<input name="xuhao" id="b" type="checkbox">bbb<br>
<input name="xuhao" id="c" type="checkbox">ccc<br>
<input name="xuhao" id="d" type="checkbox">ddd<br>
<input name="xuhao" id="e" type="checkbox">eee<br>
<input name="xuhao" id="f" type="checkbox">fff<br>
<input name="xuhao" id="g" type="checkbox">ggg<br>
<input name="xuhao" id="h" type="checkbox">hhh<br>
<input name="xuhao" id="i" type="checkbox">iii<br>
<input name="xuhao" id="j" type="checkbox">jjj<br>
<input type="button" value="弹出选中的id" οnclick="show()">
</body>
<script>
//全选按钮，点一下全选，再点全取消
function quanxuan(){

if(document.getElementById('id_all').checked==true){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (!inputs[i].checked == true){
inputs[i].checked = true;
}
}
}
}else{

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (inputs[i].checked == true){
inputs[i].checked = false;
}
}
}
}

}

//显示选中的id,在实际应用中常常需要动态获取被选中的id
function show(){
var id="";
var h=1;
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
//判断input是否为多选按钮
if(inputs[i].getAttribute('type')=='checkbox'){
// 因为第一个多选按钮是全选，所以跳过去
h=h+1;
if(h>2){
//判断多选按钮是否被选中
if (inputs[i].checked == true){
// 用jquey的话可以用下边注释的两行取id
//var input1 =$("input").eq(i);//取出相应的input
// var id1=input1.attr("id");//取出相应input的id
//没有jquery的话可以用下边的原生js
var id1=inputs[i].id;
//下边的两步是为了把id拼成一个字符串，当成json串配合java代码用的
id+=id1;
id+="|";

}
}
}
}
alert(id);
}
</script>
</html>

=========================================================================================

<html>
<head>
</head>
<body>
<input name="id_all" id="id_all" οnclick="quanxuan()" type="checkbox" value="" /><label>全选</label><br>
<input name="xuhao" id="a" type="checkbox">aaa<br>
<input name="xuhao" id="b" type="checkbox">bbb<br>
<input name="xuhao" id="c" type="checkbox">ccc<br>
<input name="xuhao" id="d" type="checkbox">ddd<br>
<input name="xuhao" id="e" type="checkbox">eee<br>
<input name="xuhao" id="f" type="checkbox">fff<br>
<input name="xuhao" id="g" type="checkbox">ggg<br>
<input name="xuhao" id="h" type="checkbox">hhh<br>
<input name="xuhao" id="i" type="checkbox">iii<br>
<input name="xuhao" id="j" type="checkbox">jjj<br>
<input type="button" value="弹出选中的id" οnclick="show()">
</body>
<script>
//全选按钮，点一下全选，再点全取消
function quanxuan(){

if(document.getElementById('id_all').checked==true){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (!inputs[i].checked == true){
inputs[i].checked = true;
}
}
}
}else{

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (inputs[i].checked == true){
inputs[i].checked = false;
}
}
}
}

}

//显示选中的id,在实际应用中常常需要动态获取被选中的id
function show(){
var id="";
var h=1;
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
//判断input是否为多选按钮
if(inputs[i].getAttribute('type')=='checkbox'){
// 因为第一个多选按钮是全选，所以跳过去
h=h+1;
if(h>2){
//判断多选按钮是否被选中
if (inputs[i].checked == true){
// 用jquey的话可以用下边注释的两行取id
// var input1 =$("input").eq(i);//取出相应的input
// var id1=input1.attr("id");//取出相应input的id
//没有jquery的话可以用下边的原生js
var id1=inputs[i].id;
//下边的两步是为了把id拼成一个字符串，当成json串配合java代码用的
id+=id1;
id+="|";

}
}
}
}
alert(id);
}
</script>
</html>