hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

css怎样运用:indeterminate选择器【html5教程】

2019-11-26HTML搜搜PHP网39°c
A+ A-
本篇文章给人人引见一下在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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
css怎样运用:indeterminate选择器【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章