zoukankan      html  css  js  c++  java
  • checkbox的三种状态处理

    checkbox只有两种值:选中(checked)或未选中(unchecked)。它可以有任何值,但是表单提交时checkbox的值只能是checked或unchecked。它的默认值是unchecked,你可以在HTML中这样控制它:

    <!-- Default to unchecked -->
    <input type="checkbox">
    
    <!-- Default to checked, XHTML -->
    <input type="checkbox" checked="checked" />
    
    <!-- Default to checked, HTML5 -->
    <input type="checkbox" checked>

    视觉上,checkbox有三种状态:checked、unchecked、indeterminate(不确定的)。看起来就像这样子:

    对于indeterminate状态的checkbox需要注意的是:你无法在HTML中设置checkbox的状态为indeterminate。因为HTML中没有indeterminate这个属性,你可以通过Javascript脚本来设置它

    var checkbox = document.getElementById("reyo-checkbox");
    checkbox.indeterminate = true;
    

     或者通过jQuery来设置

    $("#reyo-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

    $("#reyo-checkbox").attr("indeterminate", true);
    $("#reyo-checkbox").prop("indeterminate", true);
    两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容

     checkbox的indeterminate状态仅仅是视觉上的,它的值仍然只有checked或unchecked,这意味着indeterminate状态的checkbox的真正价值只是在用户界面上看起来更友好!来看一下我们实际应用的效果:

  • 相关阅读:
    博客图片上传picgo工具安装配置github图传使用
    安装配置hexo icarus主题配置
    通往远方的道路总是漫长的
    java 关于值引用、地址引用的问题
    Java设计模式の迭代器模式
    Java设计模式の模版方法模式
    vim 常用快捷键(整理版)
    Java设计模式の责任链模式
    Java设计模式の代理模式
    java rmi远程方法调用实例
  • 原文地址:https://www.cnblogs.com/interdrp/p/5684097.html
Copyright © 2011-2022 走看看