关于html中（表格）复选框的全选和全否的方法

jipanpan109 2011-04-06 04:56:07

如何点击全选按钮的时候使下面的内容全被选中。

...全文

419 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

AI风 2011-04-07

打赏
举报

回复

学习中......

荒牧 2011-04-06

打赏
举报

回复

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function IsEmpty(fData) { return ((fData == null) || (fData.length == 0)) }
function SelectAll(chkObj,chkPrefix,divID)
{
var chks;
if(IsEmpty(divID))
chks=$('input:checkbox');
else
chks=$('input:checkbox','#'+divID)
chks.each(function(i){
if(!this.disabled)
{
if(IsEmpty(chkPrefix)||this.id.indexOf(chkPrefix,0)>-1)
{
this.checked=chkObj.checked;
}
}
});
}
</script>
<input id="test" type="checkbox" onclick="SelectAll(this,'chb_','checkboxPanel')"/>select all
<div id="checkboxPanel">

<input id="chb_1" type="checkbox" />1<br/>
<input id="chb_2" type="checkbox" />2<br/>
<input id="chb_3" type="checkbox" />3<br/>
<input id="chb_4" type="checkbox" />4<br/>

</div>

荒牧 2011-04-06

打赏
举报

回复

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function IsEmpty(fData) { return ((fData == null) || (fData.length == 0)) }
function SelectAll(chkObj,chkPrefix,divID)
{
var chks;
if(IsEmpty(divID))
chks=$('input:checkbox');
else
chks=$('input:checkbox','#'+divID)
chks.each(function(i){
if(!this.disabled)
{
if(IsEmpty(chkPrefix)||this.id.indexOf(chkPrefix,0)>-1)
{
this.checked=chkObj.checked;
}
}
});
}
</script>
<input id="test" type="checkbox" onclick="SelectAll('test','chb','checkboxPanel')"/>select all
<div id="checkboxPanel">

<input id="chb_1" type="checkbox" />1<br/>
<input id="chb_2" type="checkbox" />2<br/>
<input id="chb_3" type="checkbox" />3<br/>
<input id="chb_4" type="checkbox" />4<br/>

</div>

dalmeeme 2011-04-06

打赏
举报

回复

全选、全不选、反选。供参考：

<html>

<head>

<script>

var flag=0;

function Checkall(XelementName)

{

    var checkboxes=document.getElementsByName(XelementName);

    for(var i=0;i<checkboxes.length;i++)

    {

        if (flag%3==0)    

            checkboxes[i].checked=true;

        if (flag%3==1)

            checkboxes[i].checked=false;

        if (flag%3==2)

            checkboxes[i].checked=!checkboxes[i].checked;

    }

    flag++;

}

</script>

</head>

<body>

    <input type="button" id="btn" value="全选/全不选/反选" onclick="Checkall('checkbox1')"/>

    <input type="checkbox" name="checkbox1"/>a

    <input type="checkbox" name="checkbox1"/>b

    <input type="checkbox" name="checkbox1"/>c

    <input type="checkbox" name="checkbox1"/>d

</body>

</html>

ycproc 2011-04-06

打赏
举报

回复





<script>

function SelectAll() {

 var checkboxs=document.getElementsByName("checkboxid");

 for (var i=0;i<checkboxs.length;i++) {

  var e=checkboxs[i];

  e.checked=!e.checked;

 }

}

</script>

<a href="#" onclick="SelectAll()">全选/反选</a>

<form name="checkboxform">

<input type="checkbox" name="checkboxid" id="checkboxid" value="<%=rst("fo_id")%>" />

</form>

主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。

实现复选框全选和全不选的切换

此课程为vue开发百草味项目的第二课，请先学习完第一课再学习第二课把登录成功的用户信息记录到缓存中通过缓存来判断用户是否登录过用户登录成功之后把选中的商品加入到购物车中vuex进行数据处理在vuex仓库中对加入的商品的几种情况分别进行处理在vuex仓库中对商品数据处理完之后再更新到缓存中更新加入购物车数据的方法以及把购物车数量渲染在徽章中项目刚运行的时候在初始化函数中判断用户的登录状态项目刚运行的时候在初始化函数中从缓存中更新购物车的数据到仓库通过计算属性来开发计算总价格的功能在购物车组件中控制每一个商品的复选框在购物车组件中全选复选框和每一个商品复选框关联下载并且安装三级联动v-distpicker插件加入编辑地址功能处理视图层和数据层

还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果！现在我就来使用jQuery完成对复选框的全选和全不选效果，显示效果为：要完成这个效果，必然要了解jQuery中对属性操作的方法： attr()：设置或返回被选元素的属性值。使用方...

表格中复选框的全选和全不选。

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章