提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css怎样运用:indeterminate选择器【html5教程】,css,:indeterminate

本篇文章给人人引见一下在css中:indeterminate挑选器有什么用,能够在哪些元素中运用。下面我们就来看细致的内容。

:indeterminate挑选器简朴引见

:indeterminate是一个CSS 伪类挑选器,是用于挑选处于不确定状况的用户界面元素的。

比方,radio和checkbox元素能够在选中状况和未选中状况之间切换,但偶然处于不确定状况,既不选中也不作废选中。类似地,另有HTML5 <progress>标签,当完成的百分比未知时,进度条(<progress>)能够处于不确定状况。

因而,能够细致地说,:indeterminate伪类挑选器能够在以下元素中运用:

1、复选按钮(<input type="checkbox">),其indeterminate属性设置为true。

2、单选按钮(<input type="radio">),在表单中具有雷同name值的单选按钮组中未被选中时单选按钮。

3、没有value属性的进度条元素(<progress>标签)。progress标签元素是一个HTML5元素,用于示意使命的完成进度。

能够说元素的不确定状况是一种视觉状况,下面是复选框的三种状况:已选中,未选中和不确定:

注:元素的不确定状况只能经由过程JavaScript来动态设置。上面提到的indeterminate属性只能和JavaScript一同运用,这意味着不能像下面如许经由过程HTML将元素的状况设置为不确定:

<input type="checkbox" indeterminate> <!-- 假如我们经由过程HTML增加它,则不起作用 -->

要将元素设置为不确定状况,您只能经由过程JavaScript实行此操纵。比方,假如页面中有一组复选框,则以下即将挑选第一行并将其状况更改成不确定状况:

document.getElementsByTagName("input")[0].indeterminate = true;

示例:嵌套的复选框

将复选框的状况(和款式)设置为不确定能够有效的一个用例是,当我们嵌套复选框时,让一个复选框具有了子复选框。一般是在供应多种挑选的用户界面中看到这类状况,而且某些选项具有“子选项”。

一般,设置“父”复选框,以便它可用于切换其一切子复选框的款式 - 搜检它将搜检一切子项,作废选中它将作废选中一切子项。作废选中它将许可用户搜检子复选框中的一些选项,同时保存其他选项未选中。

因而,运用此观点,能够搜检复选框是不是选中了一切子女复选框,假如未选中一切子女复选框,则该“父”复选框的状况为不确定,比方:

一组嵌套的复选框中,当我们选中一个子选项时,“父”复选框的状况为“不确定”

当我们挑选2个子选项时,“父”复选框的状况照样为“不确定”

只要,当一切子选项都被选中是,父”复选框的状况才会为“选中”

嵌套的复选框的代码:

假如复选框的标签处于不确定状况,则父复选框标签的色彩将变成deepPink。

HTML代码:

<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> 挑选喜好的生果</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> 苹果、香蕉、橘子</label></li>
        <li><label><input type="checkbox" class="subOption"> 柚子、橙子、西瓜</label></li>
        <li><label><input type="checkbox" class="subOption"> 芒果、火龙果、哈密瓜</label></li>
      </ul>
    </li>
  </ul>
</div>

css代码:

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}

input[type="checkbox"]:indeterminate + label {
  color: deepPink;
}

js代码:

var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

for(var i=0; i<checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.subOption:checked').length;

    checkall.checked = checkedCount > 0;
    checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
}

checkall.onclick = function() {
  for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
}

动态效果图:

总结:以上就是本篇文的全部内容,愿望能对人人的进修有所协助。

以上就是css怎样运用:indeterminate挑选器的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css怎样运用:indeterminate选择器【html5教程】,css,:indeterminate"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线