精华内容
下载资源
问答
  • Web前端之复选框选中属性

    千次阅读 2014-11-27 11:26:47
    Web前端之复选框选中属性  熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了。博主之前用户不少方法,经常...

    Web前端之复选框选中属性

      熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了。博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了。今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解。翻译的目的一是分享给大家,二是方便自己查阅。原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html。、

      如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句。有很多种方法来判断一个复选框是否选中。

      让我们先来看看原生的javascript是怎么判断这个属性的。在javascript中,在你选中了某个元素之后,你可以轻易地通过该元素的checked属性来判断你选中的复选框是否选中了。

      我们来看一个例子,在你的页面上面有一个复选框并且该复选框有着唯一的id,比如myCheckBox ,如下面所示:

    1 <input type="checkbox" id="myCheckBox"/>

      现在我们首先通过javascript来选中这个元素然后获取它的checked属性。

    复制代码
    1 function checkCheckBox() {
    2     if (document.getElementById('myCheckBox').checked) {
    3         //change it to alert('Its Checked'); if you not working with console
    4         console.log('Its Checked');
    5     } else {
    6         console.log('No its not Checked');
    7     }
    8 }
    复制代码

      可以看到,我们先通过id选中了这个元素然后判断它的checked属性,如果复选框选中了,它的值是true,如果复选框没有选中,它的值将是false。点击查看该例子

      如果你使用的是jQuery并且你不想用原生的javascript来进行这个判断,方法有很多:

      (1)使用 is(':checked')

         这个用法中你将使用jQuery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满足你传递给该函数的条件参数,如果条件符合,返回true,否则返回false。

         所以为了使用这个函数,我们需要选中元素然后检测选择器:checked 的值,这个选择器适用于复选框、单选按钮和select标签。 点击查看该例子

    复制代码
    1 $('input[type="button"]').click(function () {
    2     if ($('#myCheckBox').is(':checked')) {
    3         //change it to alert('Its Checked'); if you not working with console
    4         console.log('Its Checked');
    5     } else {
    6         console.log('No its not Checked');
    7     }
    8 });
    复制代码

      (2)使用prop()

        在jQuery1.6之前,函数attr()用来获取元素的property 和attributes,但是非常容易让人产生疑惑。所以jQuery1.6之后,一个新的函数prop()来获取元素的当前的property值。

        但是在这之前,我们首先需要弄明白property 和attributes的区别。attributes是你给HTML标签设置的一些属性值,这包括你给一个标签设置的class、id甚至给输入框设定初始值一样。如果你没有在标签里面设置属性值但是却通过attr()来获取属性值,  会出现undefined的情况。prop()同样是用来获取元素的属性值,但是与attr()有着明显的区别的是,即便没有在html标签中定义想要获取的属性,也能够正确的返回需要的当前的属性值。

        根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

        为了直观的体现两者之间的差别,你可以再页面加载完成之后立即改变输入框的值,这时候你就会发现即便是你的输入框的值变化了,用attr()获取的属性值并不会随着文本的改变而改变,而通过property()来获取的属性值会随着文本框内容的变化而变化。

      看一个例子:

        这里我们有一个设置了初始值的和一些attribute属性集的输入框:

    1 <input type="text" id="myTextBox" value='set attribute value' /> 

        然后在JQuery代码里我们这样写:

    1 console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
    2 console.log('Property Value is : '+$('#myTextBox').prop('value'));

        我们会发现,通过prop()来获取输入框里面的值永远都是和它里面的值同步的,而通过attr()老获取输入框里面的值一直都是在html标签里面设置的值。 点击查看该例子

      (3)使用 filter :checked

    1 var isChecked = $('#myCheckBox:checked').length > 0;

        另外一种用于判断这个属性的值的方法是在选择元素的时候加上一个过滤器  :checked,然后根据所获得的元素的长度来判断元素的属性。但是这种用法并不推荐,因为当你的页面上有很多组复选框并且使用class选择器而不是id选择器的时候,所得到的答案可能是错误的。 点击查看该例子

      我们能够看到,我们有好几种方法来获得复选款的选中属性。这也恰恰是web开发者经常需要用到并且在选择正确的使用方式时产生困惑的地方。

    展开全文
  • Flutter Checkbox 复选框

    万次阅读 2019-06-25 09:20:26
    Flutter 复选框 有两种:一 是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框 参数详解 属性 说明 Checkbox 复选框 ... 默认false,如果为true复选框的值可以为true、f...

    Flutter 复选框 有两种:一 是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框

    参数详解

    属性说明

    Checkbox 复选框

    value是否选中此复选框
    onChanged监听 当复选框的值应该更改时调用
    tristate默认false,如果为true,复选框的值可以为true、false或null。
    activeColor选中此复选框时要使用的颜色
    checkColor选中此复选框时用于复选图标的颜色
    materialTapTargetSize配置tap目标的最小大小

    CheckboxListTile 复选框

    value是否选中此复选框
    onChanged监听 当复选框的值应该更改时调用
    activeColor选中此复选框时要使用的颜色
    title列表主标题
    subtitle列表副标题
    isThreeLine默认false
    dense此列表平铺是否是垂直密集列表的一部分。
    secondary显示在复选框前面的小部件
    selected选中后文字高亮,默认false
    controlAffinity

    控件相对于文本的位置,

    默认 ListTileControlAffinity.platform

    代码示例

    Checkbox 复选框

    Checkbox(
      value: this.valueb, 
      onChanged: (bool value) {
        setState(() {
          this.valueb = value; 
        });
      },
    ),

    CheckboxListTile 复选框

    CheckboxListTile(
      secondary: const Icon(Icons.alarm_on),
      title: const Text('每天6:10 响铃'),
      subtitle: Text('12小时58分钟后响铃'),
      value: this.valued, 
      onChanged: (bool value) {
        setState(() {
          this.valued = value; 
        });
      },
    ),

    效果图

    完整代码

    查看完整代码

    展开全文
  • string idlist = ""; bool BxsChkd = false; for (int i = 0; i ; i++) { CheckBox ChkBxItem = (CheckBox)gridView.Rows... 循环中的复选框都已经勾上,ChkBxItem.Checked的值什么还是false,求解,在线等...
  • 复选框属性设置,属性获取

    千次阅读 2018-07-18 19:58:31
    (1)全选 HTML:&lt;input type="checkbox" id="selectAllproduct" style="margin:8px" onclick="selectAll(this)"... //选中:type=true; 取消选中...

    (1)全选

    HTML:<input type="checkbox" id="selectAllproduct" style="margin:8px" onclick="selectAll(this)">
    Jquery:
          function selectAll(a){
              var type = a.checked;  //选中:type=true; 取消选中:type=false
              $("#mintable input[name='productbox']").each(function() {
                  $(this).prop("checked", type); //相关该被选中的内容全部同步选中
              });
          }
    

    (2)获取多个被选中的复选框的值

    HTML:以下的input被循环产生,多个input共用一个name="productbox"

    <div><input type="checkbox" value="{{value.id}},{{value.name}}" name="productbox" class="productCheckbox">{{value.name}}</div>

    Jquery:

    function confirm(){
       var productname = $("#productname").val();
       $("#mintable input[name='productbox']").each(function(){
        var obj = $(this);
       if (obj.is(':checked')){
           var id_name = obj[0].value.split(",");
           //id_name = [value.id, value.name]
           //选中的值可取出用于业务逻辑
      document.getElementById("product_div").style.display = "none";
      }

    (3)div隐藏属性修改:此处不可用$("#product_div")这个方法获取div对象

    HTML:<div id="product_div"></div>

    JS:document.getElementById("product_div").style.display = "none";

            document.getElementById("product_div").style.display = "block";

    (4)获取复选框属性

    <input type="checkbox" id="iszfy" style="margin:8px"/>

    var var1 = $("#iszfy").prop("checked")

    var var2 = $("#iszfy").is(":checked")

    var var2 = document.getElementById("iszfy").checked

    (5)设置复选框属性

    <input type="checkbox" id="iszfy" style="margin:8px"/>

    $("$iszfy").prop("checked", true);

    $("#iszfy").prop("checked", false);

    document.getElementById("iszfy").checked = true;

    (6)input标签对象获取

    <table id = "tbl">

    <input type="checkbox" value="1" name="productbox" class="productCheckbox">

    <input type="checkbox" value="2" name="productbox" class="productCheckbox">

    <input type="checkbox" value="3" name="productbox" class="productCheckbox">

    ……

    </table>

    $("#tbl input[name="productbox"] ").each(function(){

                var obj = $(this);

                if (obj.is(":checked")){

                         //业务逻辑

                }

    });

    展开全文
  • 复选框+按钮的disabled属性

    千次阅读 2019-06-09 12:32:48
    在项目的需求中,有根据复选框的是否选中来改变页面的一些布局,今天小编就大家介绍一种简单点的情况-----勾选复选框,对应按钮的disabled属性改变,按钮的点击效果也随之改变; HTML代码 <button type...

    开发工具与关键技术: VS , 按钮的disabled属性;
    作者:刘佳明
    撰写时间:2019年 6 月 6 日

    今天介绍份知识点是按钮的disabled属性,
    在项目的需求中,有根据复选框的是否选中来改变页面的一些布局,今天小编就为大家介绍一种简单点的情况-----勾选复选框,对应按钮的disabled属性改变,按钮的点击效果也随之改变;
    在这里插入图片描述

    HTML代码

    <button type="button" class="btn btn-primary" id="trueCherck" onclick="trueCherck()">审核</button>
      <button type="button" class="btn btn-primary" id="falseCherck" onclick="falseCherck()">反审核</button>
    <div class="ml-4 mt-2 col-2">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" value="true" >
        <label class="ml-4 form-check-label" for="exampleCheck1">审核</label>
     </div>
    
    

    首先,来一张效果截图,以上图中,有两个标记的按钮, 为审核按钮,反审核按钮,目前呢,是有两种效果的显示,
    JS代码

    //jquery中没有定义获取input中checked属性的方法,需靠js 实现获取
                $("#exampleCheck1").click(function () {
                    var checked = document.getElementById("exampleCheck1").checked ;
                    if (checked == true) {
                        $("#trueCherck").prop("disabled", true);
                        $("#falseCherck").prop("disabled", false);
                        //layer.alert("目前的状态为true", { title: "提示", icon: 3 });
                    }
                    else {
                        $("#trueCherck").prop("disabled", false);
                        $("#falseCherck").prop("disabled", true);
                        //layer.alert("目前的状态为false", { title: "提示", icon: 3 })
                    }
                });
    
    

    第一种,点击两个按钮是,复选框对应的勾选或者不勾选,第二种是去勾选或者去除审核复选框的勾选情况,对应的两个按钮会出现能够点击和不能点击的效果,

     //点击按钮,审核状态变化
            //点击审核
            function trueCherck() {
                //$("#exampleCheck1").checked = true;
                document.getElementById("exampleCheck1").checked = true;
            }
            //点击反审核
            function falseCherck() {
                //$("#exampleCheck1").checked = false;
                document.getElementById("exampleCheck1").checked = false;
                var aa = document.getElementById("exampleCheck1").checked
    
            }
           
    
    

    需要注意的是,在实现以上两种情况时,对应如何获取input复选框的勾选情况,判断它是否为true,false情况,小编使用的js 获取,(也尝试使用Jquery获取,但发现并不能如愿,代码已注释,可以参考一下),其它的到并没有什么特别大的代码阻碍?

    展开全文
  • AngularJS实现复选框全选功能

    千次阅读 2019-03-21 14:10:31
    ng-checked:该属性影响复选框的状态,值为true复选框选中,值false则取消选中。 需要注意的是复选框的状态不会影响该属性的值,必须在复选框的单击事件中同步选框状态与该属性值。 页面如下 <!DOCTYPE...
  • Qt 之 QHeaderView 添加复选框

    万次阅读 热门讨论 2016-03-01 14:53:17
    本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头例,垂直表头类似!简述 效果 QHeaderView 源码 接口说明 QAbstractTableModel 源码 接口说明 使用效果QHeaderView源码...
  • 使用alertDialog时设置复选框时,复选框看不见,显示白色
  • ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选
  • value = " " /> < script type = " text/javascript " > $ ( "input" ) . click ( function ( ) { console . log ( $ ( "input[type='checkbox']" ) . prop ( "checked" ) ) } ) ...
  • jquery添加属性checked不管用(jquery,prop的使用) $("#xxx").attr("checked","checked"); 但是页面上并没有选中,换成 ...这里用attr只是元素添加了checked=“checked”的属性,但是并没有使checked
  • 复选框”页面: ————————————————...2.如果某条记录满足某个不能删除的条件,则该行对应的复选框不能选,删除按钮设置灰色,点击弹出“该记录被被锁定,不能删除!” 3.否则,删除能实现,
  • 多选select框常用函数,从左边的复选框选出到右边复选框 multipleSelect.js
  • 复选框的全选、反选,判断哪些复选框被选中,这个功能不难做, 利用document.getElementsByName("xxx");能够轻易实现,注意其返回值是一个节点数组便是了。 不过这功能对于用户来说是非常贴心的。下面举一个例子还...
  • php /** * 在php中验证复选框的有效性 */ $value = ‘yes’; echo “<input type=’checkbox’ name=’subscribe’ value=’yes’/> 验证数据”; if (isset($_POST[‘subscribe’])) { if ($_POST[...
  • <input type="checkbox" name="chk" value= '.$value->ProvinceName.' />...把每个复选框都绑定一个事件,想单击一下复选框,触发一条指令,将被选中的复选框value值通过ajax传到php进行操作....
  • JQuery checkbox复选框操作

    千次阅读 2014-08-16 15:57:33
    项目中需要用到checkbox复选框遍历操作,在网上找了段代码不过有问题,查询手册修改后贴出来留着
  • 实现winform DataGridView增加一列CheckBox(复选框)列。 效果图 DataGridView =&amp;amp;gt;...private void Form_Load(object sender, ... //dgv增加复选框列 DataGridViewCheckBoxColumn checkbox = ne...
  • Qt 之 QTableView 添加复选框(QAbstractTableModel)

    万次阅读 多人点赞 2016-02-22 17:58:34
    简述使用QTableView,经常会遇到复选框,好的复选框应该包括: 三态:不选/半选/全选 自定义风格(样式)。 下面我们介绍一下常见的实现方式: 编辑委托。 方式:利用委托重载createEditor(),激活QCheckBox。 ...
  • layui获取复选框的值及给复选框赋值

    千次阅读 2019-10-31 13:45:57
    layui获取复选框的值 layui获取单个复选框的值 =========================================HTML============================================= <div class="layui-form-item"> <div class="layui-col-...
  • 复选框有个onchange()事件 function changeval(){ var check = document.getElementById("checkid"); if(check.checked == true){ document.getElementById("checkid").valu
  • layui复选框

    千次阅读 2018-11-20 16:52:00
    layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置 html代码使用了jfinal...
  • ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502337107_292711.png) 如上图,用jq选中北京,上海这两个复选框
  • 当我反复点击了全选后 点击form表单的保存 获取的 表单的value中 关于复选框的值 会重复出现多个 例如复选框本身5个 当我反复点击全选5次后 复选框value变成了25 原因是 利用item 循环的复选框 虽然通过外在修改...
  • dojo-复选框

    千次阅读 2016-07-07 22:07:23
    1、问题背景 设计一组复选框,并获取复选框的值2、实现源码 dojo-复选框 body,html{ width: 99%; height: 99%; font-family: "微软雅黑"; font-size: 12px; overflow: ...
  • Qt 之 QTableView 添加复选框(QAbstractItemDelegate)

    万次阅读 热门讨论 2016-02-23 10:24:48
    简述上节分享了使用自定义模型QAbstractTableModel来实现复选框。下面我们来介绍另外一种方式: 自定义委托-QAbstractItemDelegate。简述 效果 QAbstractTableModel 源码 接口说明 QStyledItemDelegate 源码 接口...
  • jquery中如实现判断复选框是否选中,获取选中单选按钮的值
  • 表单控件之复选框

    千次阅读 2018-04-08 17:05:44
    忽然遇到了复选框很是新奇,毕竟这么久都没见过它了。 问题:关于复选框的加载(用于添加页面) 实现:1.ajax异步请求从数据库获取都有哪些类型。 $.ajax({ url:"getChapterType", dataType:"json", ...
  • Form表单之复选框checkbox操作

    千次阅读 2019-09-12 18:12:02
    input复选框(CheckBox) <label>input复选1组:</label> <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1 <input type="checkbox" name=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,195
精华内容 19,678
关键字:

复选框的value属性为true