网页checkbox三态的实现

最新推荐文章于 2020-11-28 22:23:30 发布
最新推荐文章于 2020-11-28 22:23:30 发布
阅读量1k 收藏
点赞数
分类专栏： DHTML+css 文章标签： firefox null ie c
 以下代码直接可运行,仅支持IE,目前还没有找到firefox的解决办法,希望我会的解答一下
  2. <body onload=check()>
  3. <h3>三态的checkbox(变化顺序:未选中->灰色选中->白色选中)</h3><br>
  4. <form name=test>
  5. 根据onclick变化的checkbox:<br>
  6.  <input type=checkbox name=checkbox0 flag=0 onclick="gray(this)">初始化为未选中的checkbox<br>
  7.  </td><td><input type=checkbox name=checkbox1 flag=1 onclick="gray(this)">初始化为白色选中的checkbox<br>
  8.  </td><td><input type=checkbox name=checkbox2 flag=2 onclick="gray(this)">初始化为灰色选中的checkbox<br>
  9. 根据onpropertychange变化的checkbox:<br>
  10.  <input type=checkbox name=checkbox3 onpropertychange="gray2(this)">初始化为未选中的checkbox
  11. </form>
  12. </body>
  13. <script language=javascript>
  14. //用于onclick,需要一个自定义属性flag.
  15. function gray(c)
  16. {
  17.  switch(c.flag)
  18.  {
  19.   //当flag为0时,为未选中状态
  20.   case "0":c.checked=true;c.indeterminate=true;c.flag="2";break;
  21.   //当flag未1时,为白色选中状态
  22.   case "2":c.checked=true;c.indeterminate=false;c.flag="1";break;
  23.   //当flag为2时,为灰色选中状态
  24.   case "1":c.checked=false;c.indeterminate=false;c.flag="0";break;
  25.  }
  26. }
  27. //用于onpropertychange
  28. function gray2(c)
  29. {
  30.  cc.indeterminate=c.checked;
  31. }
  32. //用于body的onload,根据checkbox的flag属性判断checkbox的状态
  33. function check()
  34. {
  35.  for(var i = 0;i<document.test.elements.length;i++)
  36.  {
  37.   var ele = document.test.elements[i];
  38.   if(ele.flag!=null)
  39.   {
  40.    if(ele.flag=="0")
  41.    {
  42.     ele.checked = false;
  43.     ele.indeterminate = false;
  44.    }
  45.    if(ele.flag=="1")
  46.    {
  47.     ele.checked = true;
  48.     ele.indeterminate = false;
  49.    }
  50.    if(ele.flag=="2")
  51.    {
  52.     ele.checked = true;
  53.     ele.indeterminate = true;
  54.    }
  55.   }
  56.  }
  57. }
  58. </script>
主要注意 indeterminate 属性

flyingxdance
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkbox 三态【转】
03-21
NULL 博文链接：https://xuhu-java.iteye.com/blog/979641
html单选按钮 状态,HTML input radio 单选按钮简介说明
weixin_42524004的博客
05-31 5261
摘要:下文讲述html代码中input type=’radio’时的相关属性简介说明,如下所示:input type=’radio’ 简介当input标签中type=’radio’时,即可创建一个单选按钮单选按钮注意事项:在一个html页面中,一组具有相同name属性值的radio按钮，同时有且只有一个radio按钮被选中(当我们点选一个radio时，其它name相同的radio单选框会自动变为非...
纯样式实现完美Radio单选框
weixin_42353446的博客
08-17 1万+
DOM 结构 今天将带领大家使用纯样式来实现一个支持 tab 键切换的单选框。 主要会用到 ::before 和 ::after 伪元素、CSS 属性选择器、相邻兄弟选择器、CSS3 transform 等，样式会用 SCSS ，因为它更直观、易于阅读。 DOM 结构 你有多久没出去浪了？ 创建一个关于出去浪的单选按钮组吧： <h2>你想去哪里浪？</h2> <d...
3态复选框CheckBox
闻缺陷则喜何志丹
12-22 1775
软件架构师何志丹：3态复选框CheckBox
复选框checkbox的三种状态
The_Best_Hacker的博客
02-28 8145
checked的选中状态 不设置checked是默认不被选中的， 一旦设置checked="false"或者checked = true或者不设置任何值，都会被解释为选中。 &lt;input type="checkbox" name="test" id="test1"/&gt; //未被选中 &lt;input type="checkbox" name="test
QT5学习之复选框类QCheckBox的三态
热门推荐
u012043391的专栏
01-18 1万+
The QCheckBox widget provides a checkboxwith a text label. Header:#include qmake:QT += widgets Inherits:QAbstractButton   复选框是一个带有文本的选择按钮，可以被打开（Checked）也可以被关闭（Unchecked）。 复选框的状态变化会发射一个信号state
带三态checkbox的treeview
09-14
三态checkbox具有三种状态，并且将三态checkbox应用于treeview，有实例代码
(仅IE下有效)关于checkbox 三态
12-11
From:...其实这种不确定的CheckBox状态Web中也是可以表现的。 在Web页面中，我们可以使用<input id=”chkb” type=”CheckBox”>来得到一个CheckBox控件。这个控件最常见的形式就是c
三态TreeView
08-06
本例中提供了三种状态，选中，部分选中，不选。当处于选中状态时，其所有子节点全部选中，当处于不选状态时其子节点都未选中状态。当其有子节点（并非所有子节点）被选中时，其属于半选中状态。默认选中状态不可写，...
基于JS实现checkbox全选功能实例代码
10-21
最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单，再次点击全选取消选中。下面小编给大家分享实现代码，对js实现checkbox全选功能感兴趣的朋友参考下吧
PB 11.5 CheckBox三种状态的实例
04-29
PB 11.5 CheckBox三种状态的实例。
HTML使用CSS实现三态图标
12-05
HTML使用CSS实现三态图标详情看博客
HTML复选框
06-20
是否因为前端页面中select每次只能选一个选项的困惑而苦恼？使用这个复选控件吧，轻松实现复选框功能。每次可以选多个选项。效果美观。
checkbox控件的checked属性作用是_CheckBox复选框用法及实例代码
weixin_39959335的博客
11-28 3917
CheckBox复选框控件也能够提供选择功能，和我们上一期所学习的radiobutton控件类似，区别在于CheckBox复选框控件能够选择多个条件，即选择多个复选框选项，常见有以下几个属性：Checked：默认值为false，作用是检查复选框是否被选中Threestate：默认值为false，设置复选框两种或者三种状态，当值设置为false时则为两种状态，分别是不勾选和勾选。那么，当属性值设置为...
原创CheckBox的第三种状态原生代码
小达哥的博客
12-08 997
js遍历出html for ( var key in map) { var s1=""; var s2=""; var check = false; //通过遍历对象属性的方法，遍历键值对，获得key，然后通过 对象[key]获得对应的值 var list = map[key]; for (var i=0; i< list.length;i++) { debugger; s2+='&lt...
设置选中最大值，选中数达最大值时，其他选项置灰
我的博客
11-23 275
需求描述：循环数组得到选项的div块，选中的爱好达到3个时，其他选项置灰，不能选择；点击取消3个中的一个选项，可以继续选择选项 图片描述： 循环得到选项 点击选中的样式 选中数量达到最大值 代码设计： <template> <div> <div class="interest-home flex"> <p ...
如何实现checkbox的第三种状态?
makesomethings的博客
09-08 715
问题: 如何实现途中这种复选框的[-]状态? 解答: 这种状态叫做indeterminate（不确定的）, 它属于checkbox的三种状态之一. 要实现这种状态, 请参考如下代码: $('checkbox').prop('indeterminate', true) // 添加属性 $('checkbox').prop('indeterminate', false) // 移除属性 参考文档:...
三态的checkbox
野文的专栏
11-18 8367
  在checkbox中，我们常用的是他的两态，即通过checked属性的true或false控制的checked状态和unchecked状态，实际它还有第三种状态，即“不确定的状态”indeterminate。  checked属性来决定选择框是否被勾选，而indeterminate决定选择框是是否是不确定的（true是选择框会变灰白色）。三态的checkbox(变化顺序:未选中->灰色
checkbox实现单选
最新发布
04-04
checkbox通常用于多选，如果要实现单选，可以通过以下几种方式： 1. 使用radio按钮代替checkbox。radio按钮本身就是单选的，只需将多个radio按钮的name属性设置为相同的值，即可实现单选。 2. 使用JavaScript控制...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值