全选，复选功能的实现

最新推荐文章于 2022-04-19 10:55:12 发布
最新推荐文章于 2022-04-19 10:55:12 发布
阅读量242 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhx2017/article/details/72629881
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
<table border="1" width="60%">
<tr>
<td><input type="checkbox" name="all"/>全选</td>
<td>复选框示例</td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>1</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>2</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>5</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" class="num" name="num"/>6</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="reall"/>反选</td>
<td></td>
</tr>
</table>
<script>
var allDom = document.getElementsByName("all")[0];
var numDoms = document.getElementsByName("num");
var reallDom = document.getElementsByName("reall")[0]
allDom.onclick = function(){
if(this.checked){
for(var i=0;i<numDoms.length;i++){
numDoms[i].checked = true;
}
}else{
for(var i=0;i<numDoms.length;i++){
numDoms[i].checked = false;
}
}
}
reallDom.onclick = function(){
for(var i=0;i<numDoms.length;i++){
if(!numDoms[i].checked){
numDoms[i].checked = true;
}else{
numDoms[i].checked = false;
allDom.checked = false;
}
}
}
$(function(){
$("[name=num]").click(function(){
for(var i=0;i<numDoms.length;i++){
if(!numDoms[i].checked){
allDom.checked = false;
break;
}else{
allDom.checked = true;
}
}
});
});
</script>


</body>
</html>
jhx2017
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qlist 嵌套_QComboBox实现复选功能（三种方法：嵌套QListWidget, 设置QStandardItemModel, 设置Delegate）...
weixin_32602879的博客
02-04 647
今天介绍一下一个小东西 — 如何让QComboBox实现复选功能？需求：下拉列表有复选功能不可编辑显示所有选中项关于QComboBox的复选功能有几种方案：QStandardItemModel + QStandardItemQListWidget +QListWidgetItemModel/View + QItemDelegate当然，还有其它更好的方式，这里就不再过多介绍了，下面介绍一种比较简...
全选复选框的实现
Z少年的博客
09-13 743
//全选复选框         private void checkBox1_CheckedChanged(object sender, EventArgs e)         {             int count = dataGridView1.RowCount;             if (checkBox1.CheckState == CheckState.Checked)...
复选框选择功能大全
01-18 681
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><title>test</title><br /><script type="text/j
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4108
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
分页复选设计是怎样让你入坑的
05-26 222
定义 什么是分页复选设计呢？如下图所示，这是掘金专栏的一个功能，可以选择将同类的文件批量添加到专栏里，随着下拉，会一页一页的返回。 除了这种设计，还有一种是下面有页数，根据页数跳转的设计，如： 使用 复选功能有两个，选中和取消。 这种分页复选，我见过两种设计。 第一种，也就是掘金专题上面的用法，已经选好的不会再在分页中显示出来，所以分页复选只实现了增加的功能。已经选中的有单独的列表，在这个列表中可以选中删除。 成功的将增加和删除分割开来，用户使用起来很通畅。 第二种，选中和取消功能都在分页复选中。有一
WPF实现带全选复选框的列表控件
10-19
通过以上步骤，你可以创建一个功能完备且响应迅速的带全选复选框的列表控件，不仅实现了UI层面的交互，还利用数据绑定和事件处理实现了业务逻辑。这充分展示了WPF强大的自定义控件能力和数据绑定机制。
QTableWidget表头添加复选框实现全选功能
04-08
有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...
利用Bootstrap实现表格复选框checkbox全选
08-31
请注意，我们在`<thead>`中的第一列添加了一个空的`<th>`元素，用于放置全选复选框。在`<tbody>`中，每行的第一列我们添加了一个单独的复选框。 接下来，我们需要用JavaScript（这里我们可以使用jQuery）来实现全选...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
复选框全选与全不选操作实现思路
09-05
在网页交互设计中，复选框（Checkbox...总之，使用JavaScript实现复选框的全选与全不选功能是网页交互设计中的一项基础技能。通过理解上述代码和实现思路，开发者可以轻松地在自己的项目中应用这一功能，提升用户体验。
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
让复选框实现单选功能
a327784689的专栏
11-26 5481
在项目中，我们往往做管理页面的查询功能时，遇到这种情况，即：查询条件有两个选择，有和无，如果是有的情况，则需要另外输入一个文本进行模糊查询，如果是无的情况，则将输入框置为无效，只查询无的情况。咋一看，有或无，只能成立一种情况，那么我们可以将两个条件设置成单选框，要么有，要么无。但在实际中，我们查询时，肯定是默认加载所有数据，所以，如果把这个条件做成单选框，那么一旦选中了一个条件，就无法选中另外一个...
全选 复选
web_note的博客
05-21 283
1. 一般的jq全选 复选写法$(function () {      $('input[type="checkbox"]').change(function (e) {         if(this.className == 'all')         {             $('.check').prop('checked', this.checked...
js实现全选复选
G_JD1234的博客
08-15 179
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #container { width: 300px; hei...
JS 全选选择
甘乐2333的博客
05-28 213
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox" name="hobby" i...
JS实现全选与全不选
Those who achieve great thing do not stick to trifles
01-25 7233
JS实现全选与全不选 一、步骤分析 1、使用<input type="checkbox" >进行复选框的布局。 2、对全选框进行事件绑定。(鼠标单击) 3、编写全选函数。 4、获取复选框的状态，使其他复选框与全选框的状态一致。 二、代码练习 <!DOCTYPE html> <html> <head> <meta charse...
javascript实现复选框的全选功能
浪子回头
09-13 1070
function selectAll(){//全选复选框方法   var inp = document.getElementsByName("checkbox");   var powerinp = document.getElementById("all");   for(var i=0;i    if(powerinp.checked==true){//如果全选复选框为选中状态true
类似checkbox复选框功能
crystalHy的博客
04-19 717
防checkbox功能，勾选时，为实心
qt控件如何在qtablewidget复选框实现全选功能python
最新发布
04-30
在QTableWidget中进行复选框全选的功能实现，需要借助Qt的信号与槽机制来实现。我们可以通过一个全选的复选框和每个单个复选框关联，使得全选复选框的选中状态与所有单个复选框的选中状态保持一致。 具体实现步骤如下： 1.创建一个全选的复选框，将其添加到QTableWidget中，并将其与一个槽函数关联。 2.在QTableWidget中创建每个单个的复选框，并将其与一个槽函数关联。在这个槽函数中，我们可以根据每个单个复选框的选中状态来修改全选复选框的选中状态。 3.在全选复选框的槽函数中，我们可以通过遍历QTableWidget中的所有单个复选框，将它们的选中状态与全选复选框的选中状态保持一致。 最终实现的效果是，当全选复选框被选中时，QTableWidget中的所有单个复选框都被选中。而当单个复选框中任意一个未被选中时，全选复选框也会取消选中。 总之，通过Qt信号与槽机制，我们可以很方便地实现复选框的全选功能。通过这种方式，用户可以轻松地进行多项选择，提高了应用程序的易用性和效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值