复选框

最新推荐文章于 2024-04-17 09:12:12 发布
最新推荐文章于 2024-04-17 09:12:12 发布
阅读量272 收藏
点赞数
 <script type="text/javascript">
//--列头全选框被单击---
  function ChkAllClick(sonName, cbAllId){
      var arrSon = document.getElementsByName(sonName);
   var cbAll = document.getElementById(cbAllId);
   var tempState=cbAll.checked;
   for(i=0;i<arrSon.length;i++) {
    if(arrSon[i].checked!=tempState)
             arrSon[i].click();
   }
  }


  // --子项复选框被单击---
  function ChkSonClick(sonName, cbAllId) {
   var arrSon = document.getElementsByName(sonName);
   var cbAll = document.getElementById(cbAllId);
   for(var i=0; i<arrSon.length; i++) {
       if(!arrSon[i].checked) {
       cbAll.checked = false;
       return;
       }
   }
   cbAll.checked = true;
  }


  // --反选被单击---
  function ChkOppClick(sonName){
   var arrSon = document.getElementsByName(sonName);
   for(i=0;i<arrSon.length;i++) {
    arrSon[i].click();
   }
  }
  </script>
 </head>
 <body>
   <form name="form1" method="post" action="">
<table width="500" border="1">
  <tr bgcolor="#FFFF66">
    <td>
      <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>
    <td align="center">复选框全选示例 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' οnclick="ChkSonClick('chkSon','chkAll')" />1</td>
    <td> 作用： </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' οnclick="ChkSonClick('chkSon','chkAll')" />2</td>
    <td> a.单击列头复选框全选或全不选子项 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' οnclick="ChkSonClick('chkSon','chkAll')" />3</td>
    <td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon4" type="checkbox"  value='4' οnclick="ChkSonClick('chkSon','chkAll')" />4</td>
    <td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon5" type="checkbox"  value='5' οnclick="ChkSonClick('chkSon','chkAll')" />5</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>

    <td>

<INPUT name="chkSon" id="chkSon6" type="checkbox"  value='6' οnclick="ChkSonClick('chkSon','chkAll')"/>6</td>

    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon7" type="checkbox"  value='7' οnclick="ChkSonClick('chkSon','chkAll')" />7</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon8" type="checkbox"  value='8' οnclick="ChkSonClick('chkSon','chkAll')" />8</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' οnclick="ChkSonClick('chkSon','chkAll')" />9</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
 <td><INPUT name="chkSon" id="chkSon10" type="checkbox"  value='10' οnclick="ChkSonClick('chkSon','chkAll')" />10</td>
    <td>d.将复选框反过来选</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#66FFFF">
    <td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
    <td align="center">反选示例</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</form>


                                                                                                                                                       摘自---小木v587--

ShallyCXJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 组件篇 Checkbox
秋来九月八
10-01 7856
实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。
复选框checkbox的三种状态
m0_74265396的博客
07-30 3693
一旦设置checked="false"或者checked = true或者不设置任何值，都会被解释为选中。不设置checked是默认不被选中的，
checkbox的value和checked属性详解
热门推荐
kouryoushine的博客
02-27 7万+
一 、checked属性 checked属性代表的是当前checkbox是否被选中，如果选中返回true，未选中返回false。和value值无关。 &lt;p&gt;&lt;input type="checkbox" name="vehicle" checked/&gt; I have a car&lt;/p&gt; document.getElementById("checkbox1").c..
CheckBox选中触发事件 和 取消选中触发事件
yydszxd的博客
11-11 1万+
CheckBox(val,row){ if(val.includes(row)){ //触发选中事件 this.$refs.show(row.code) }else{ //触发取消选中事件 this.$refs.hide(row.code) } }
html中<checkbox>标签用法解析及如何设置checkbox复选框的默认选中状态
兵哥LOVE坤
07-26 2万+
html中复选框Checkbox对象代表一个 HTML 表单中的 一个选择框。   html中复选框Checkbox对象的属性 属性             描述 accessKey        设置或返回访问 checkbox 的快捷键。 alt              设置或返回不支持 checkbox 时显示的替代文本。 checked          设置或返回 chec...
unity-复选框，单选框
09-07
在创建交互式游戏或应用时，复选框和单选框是不可或缺的元素，它们允许用户进行选择并提供反馈。本文将深入探讨Unity中的复选框和单选框，并提供实现这些功能的关键知识点。 一、Unity UI系统概述 Unity的UGUI是在...
C# toolStrip 复选框实现
04-25
在C#编程中，`toolStrip`控件是一个用于创建自定义工具栏的组件，它允许开发者在用户界面中放置各种工具按钮、下拉菜单、复选框等元素，以提高用户体验和交互性。本篇文章将深入探讨如何在C#中实现`toolStrip`中的复...
jsp 复选框使用方法
10-30
jsp 复选框使用方法实例代码
复选框样式
01-11
在网页设计中，复选框（Checkbox）是一种常见的表单元素，用于让用户在多个选项中进行多选。复选框的样式通常是浏览器默认的，但为了提升用户体验和界面美观度，开发者经常需要对其进行自定义。标题提到的"复选框...
QT QTreeWidget添加复选框
01-19
当我们需要在树形结构中实现选择功能时，可以给QTreeWidget的每一项添加复选框，以便用户可以选择单个或多个节点。这个过程涉及到Qt的自定义item delegate以及信号和槽的机制。 首先，我们要理解QTreeWidgetItem类...
漂亮的Checkbox Radio漂亮样式
02-18
漂亮的Checkbox Radio漂亮样式
一个简单的iOS复选框
04-04
源码BFPaperCheckbox，一个简单的iOS复选框，灵感来自于Google的Paper Material Design。BFPaperCheckbox是UIButton的子类，实现了Google的Paper Material Design的复选框风格，所有动画都是在底层异步实现的。可根据需求简单自定义复选框的颜色和点击区的颜色，当然你也可以删除点击区的颜色。 测试环境：Xcode 5.0，iOS 6.0以上
【复选框checkbox的全选功能（分类全选）】
qq_48968230的博客
06-27 952
复选框的分类全选和总体全选
jquery实现全选、反选、取消全部等操作(复选框checkbox)
最新发布
m0_61549984的博客
04-17 1468
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
你见过吗？9款超炫的复选框（Checkbox）效果
weixin_34124651的博客
04-21 345
　　复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。 　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。     　　前面三款效果都是灵感来自...
checkbox
memeor的专栏
07-20 1886
CheckBox(复选框)控件用来标识某个选项是否为选定的状态。因此通常用此控件提供“Yes/No”或“True/False”选项。可用分组的CheckBox控件显示多组不同类型的选项，用户可从中一个组选择一个或多个选项。CheckBox控件在工具箱中的图标如图所示：CheckBox控件与RadioBox(单选框)控件都可以用来指示用户是否对某个选项作出选择。不同之处在于，对于一个组内Radi
使用递归解决数组转树形结构,勾选树形结构节点复选框,获取选中节点的所有id(不包含半选中的id)
多看书少吃饭的博客
10-25 1536
使用递归解决数组转树形结构,勾选树形结构节点复选框,获取选中节点的所有id
一款非常漂亮的bootstrap表单checkbox/radio样式推荐
Love.Hope.Faith
03-02 3万+
如题。 http://www.bootcss.com/p/icheck/ 这个bootstrap提供的icheck插件，首先是非常小。效率相对较高。其优点如下图所示： 可以有十种颜色可以供用户自定义。样式也是够丰富的。更重要的是，其样式是根据css来的。也就是用户如果觉得不爽，可以直接修改css文件来达到进一步的自定义。 如果你使用一个盒子来包住它。元素的大小就会根据父级元素来进行
qtableview复选框
01-24
QTableView是Qt中的一个类，用于展示数据的表格视图控件。它可以用来显示和编辑数据，并且支持复选框。复选框是一种常见的用户交互控件，用于选择或取消选择特定的项目。 在QTableView中使用复选框需要以下几个步骤： 1. 创建一个QStandardItemModel模型，并将其设置为QTableView的模型。QStandardItemModel是一个用于展示数据的模型，可以灵活地设置各个单元格的数据和属性。 2. 在QStandardItemModel中添加复选框的实例。可以通过调用QStandardItemModel的setItem方法并设置Qt::CheckStateRole来设置复选框的状态。Qt::CheckStateRole是一个Qt中预定义的角色，用于设置复选框的状态。 3. 在QTableView中启用复选框。可以通过调用QTableView的setSelectionMode方法并设置QAbstractItemView::MultiSelection来启用多选模式，这样可以允许用户在复选框中选择多个项目。 4. 可以通过使用QTableView的setIndexWidget方法将复选框附加到特定的单元格。这样，每个单元格都会显示一个复选框，并且用户可以通过选中或取消选中复选框来选择或取消选择特定的项目。 总的来说，通过上述步骤，我们可以在QTableView中实现复选框的功能。这样用户可以方便地在表格中选择多个项目，并进行相关操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值