精华内容
下载资源
问答
  • 复选框勾选状态下背景色的处理 <input type="checkbox"> ```css /* css 复选框 */ input[type=checkbox] { cursor: pointer; position: relative; } input[type=checkbox]::after { position: ...

    复选框勾选状态下背景色的处理

    <input type="checkbox">
    
    
    ```css
    
       /* css 复选框 */
        input[type=checkbox] {
            cursor: pointer;
            position: relative;
        }
    
        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            background-color: #fff;
            color: #fff;
            width: 14px;
            height: 14px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 2px;
            box-sizing: border-box;
            border: 1px solid #ddd;
        }
    
        input[type=checkbox]:checked::after {
            content: "";
            background-color: #037DF3;
            border-color: #037DF3;
            background-color: #037DF3;
        }
    
        input[type=checkbox]:checked::before {
            content: '';
            position: absolute;
            top: 1px;
            left: 5px;
            width: 3px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            z-index: 1;
        }
      </style>
    
    
    展开全文
  • element组件点击复选框不选中问题 问题复现 代码呈现 问题原因 计算属性以上用法属于get,能直接修改,计算属性想要修改需要使用set方法。以上点击复选框后看似值变了,实质复选框绑定未被修改,所以复选框不能...

    element组件点击复选框不选中问题

    问题复现

    在这里插入图片描述

    代码呈现

    在这里插入图片描述
    在这里插入图片描述

    问题原因

    计算属性以上用法属于get,不能直接修改,计算属性想要修改需要使用set方法。以上点击复选框后看似值变了,实质复选框绑定未被修改,所以复选框不能选中。自己的理解——计算属性是一个虚拟值,依赖data里的值改变,当data里的值变了,计算属性就会执行。

    解决方式

    filter字段在data里定义,watch里修改
    1、data里定义
    在这里插入图片描述

    2、watch里改变
    在这里插入图片描述

    总结

    element复选框组件绑定的值只能在data中定义

    展开全文
  • 用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果。 提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的。原因在于readonly属性...

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果。

    提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/取消并不改变其value属性,改变的只是一个checked状态。所以对于checkbox来说,设置了readonly,仍然是可以勾选/取消的。效果如下:

    <input type="text" name="realname" value="只读的文本内容..." readonly="readonly" />
    <input type="checkbox" name="optiona" readonly="readonly" />option a                     <input type="checkbox" name="optionb" readonly="readonly" />option b                     <input type="checkbox" name="optionc" readonly="readonly" />option c                option a option b option c               

    和readonly类似的,还有一个disabled属性,这个属性的作用是设置页面元素为不可用,即不可进行任何交互操作(包括不可修改value属性、不可修改checked状态等)。效果如下:

    <input type="text" name="realname" value="输入的文本内容..." disabled="disabled" />               
                        <input type="checkbox" name="optiona" disabled="disabled" />option a                     <input type="checkbox" name="optionb" disabled="disabled" />option b                     <input type="checkbox" name="optionc" disabled="disabled" />option c                option a option b option c               

    从上面我们可以看到,无论是readonly还是disabled,都没有实现我们期望的效果。既然直接实现不了,那么我们可以变通一下,模拟实现。代码如下:

    <input type="checkbox" name="chkAllowed" οnclick="return                        false;" checked="checked" />      
    展开全文
  • 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开发者经常需要用到并且在选择正确的使用方式时产生困惑的地方。

    展开全文
  • 模拟QQ聊天树状结构图,添加复选框属性 下面是代码: 如上图我们的根节点ID为datass, 现在选择文字,复选框也会被选中。大家试试看吧;
  • layui表格数据复选框回显设置

    千次阅读 2018-11-15 14:43:41
    点击分为时间与方法: onclick=***为点击事件 ***.click()为方法,调用此方法等于自动点击
  • 1是为了点击复选框跳转到响应函数selectAll,在此响应函数下定义其他复选框状态更改 2是设置其他复习框的class属性值都相同,为了更改状态时统一操作 复选框状态响应函数 2就是跳转的函数 3表示:对class属性...
  • HTML复选框和提交按钮组合设置

    千次阅读 2015-08-05 16:39:27
    在html中怎样来创建复选框,对于创建复选框我们应该注意什么样的问题,这个html文档借助一个例子,很好的总结了对复选框设置设置复选框用到的标签是<form><input>我们队这些标签的属性应该怎样来写
  • 复选框+按钮的disabled属性

    千次阅读 2019-06-09 12:32:48
    在项目的需求中,有根据复选框的是否选中来改变页面的一些布局,今天小编就为大家介绍一种简单点的情况-----勾选复选框,对应按钮的disabled属性改变,按钮的点击效果也随之改变; HTML代码 <button type...
  • 这篇文章要分享的是复选框确定状态,html中的复选框是:    一般遇到复选框或许只需要选中或者选中两种状态即可,但是有时候需要第三... 方法是通过js设置复选框的indeterminate属性,在标签中设置属性无效。
  • ztree指定节点 设置复选框

    万次阅读 2018-03-28 16:16:02
    ztree指定节点 设置复选框 首先,需引入ztree的js文件 &amp;amp;amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;amp;amp;quot;../../assets/ztree/js/jquery.ztree.core-3.5.min.js&amp...
  • // 多选框集合 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); // 绑定id //追加到checkBoxList中 ...
  • 游戏开发中有时我们会用到CheckBox,CheckBox就是复选框,大家应该都见过复选框,它有两个状态,一个勾选态,一个非勾选态,我们可以通过CheckBox在这两个状态间的切换来实现一些特定的判断功能,比如是否游戏关闭...
  • CSS设置复选框check样式

    千次阅读 2018-11-13 17:08:04
    2.隐藏原来的复选框,利用:after或:before伪样式在label前或后添加一个空白字符,设置宽高和圆角 3.点击label或圆角时设置圆角颜色,因为三者是一起的,所以三者一起变化 &lt;!DOCTYPE html&gt; &lt;...
  • Ant design vue 表格设置选中行进行设置复选框选中

    万次阅读 热门讨论 2019-05-13 15:36:12
    常规情况下, 我们要想选中一条数据, 需要点击该行行首的复选框, 无奈复选框稍小, 因此想要实现如题功能, 用的是这款ui框架, 主要看它的样式都比较好看, 和elementui很相像, 知道谁模仿谁, 感觉这个做的好一点而且...
  • 使用jQuery完成复选框的全选和全

    万次阅读 多人点赞 2018-08-04 21:39:52
    还记得之前我使用JavaScript来实现复选框的全选和全选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全选的效果!现在我就来使用jQuery完成对复选框...
  • 相信大家也会遇到点击一个...那么可以给复选框的ID一个改变事件,再判断复选框是否在勾选,如果处于勾选状态会有一个checked的一个类,判断该复选框是否处于选中状态,如果没有选中就设置下拉框的一个禁用的属性为Fa...
  • checkbox复选框设置为只能单选

    千次阅读 2019-11-05 09:44:15
    prop() 方法设置或返回被元素的属性和值。 当该方法用于返回属性值时,则返回第一个匹配元素的值。 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 语法 返回属性的值: $(selector).prop...
  • jQuery点击复选框让button按钮变色

    千次阅读 2018-07-12 16:08:14
    /* * button按钮变色思路 * 当页面加载完毕时此时button按钮没有checked属性... * 则button按钮为默认背景色,当鼠标点击button时添加checked属性并赋值为true,这时button的背景色为红色,再次点击时将checked属...
  • 一个列表里的几行数据,每行数据前都有一个复选框,默认为选中状态,点击某行的时候会设置当前行前复选框的checked属性为true,但是对应的change事件并执行,如果直接点击某行的复选框,change事件就执行了,...
  • easyui combotree设置某节点显示复选框

    千次阅读 2018-01-02 17:45:18
    easyui combotree 设置部分节点显示复选框 combotree 继承tree tree API中提供了checkbox 属性,但是combotree中没有,因此需要给combotree加上checkbox 属性 方法一: //tree.tree($.extend({},opts,{checkbox:...
  • 点击复选框,按钮禁用/启用

    千次阅读 2016-02-23 20:38:47
    长话短说,一个小功能,按钮最开始的时候是禁用,选择复选框后,按钮启用,再点击一下,按钮禁用。 本次使用angularjs混合jquery来使用,先看页面元素; 我已阅读并同意协议条款 签约并支付 ...
  • 要求只有复选框选中的数据才可以处理,结果发现当单击数据时,数据也会被选中,后来百度发现有人说SelectOnCheck属性与CheckOnSelect属性,使用后发现不行,这两个属性只是决定单击与复选框的关系,并能实现单击...
  •  复选框绑定了click事件,点一次选中,再点击取消选中, 第一次,可以正常显示选中和取消,但当再去选中的时候,复选框属性checkbox值变为"checked",没问题,但是复选框在显示选中状态,F12发现...
  • Android Studio 复选框CheckBox

    千次阅读 2020-03-30 18:09:18
    复选框用于选择某几项内容,经典场景如选课,从语文、数学、英语中选择1门或者2门。 显示 在布局文件中,注意通过checked属性设置是否默认选中即可,代码如下: <?xml version="1.0" encoding="utf-8"?> <...
  • checkbox类型使用required属性时,如果给每个选项都添加,则需要选择全部选项后才能提交。 本文的方法可以实现只选择一个选项后即可提交。 实现代码: <!DOCTYPE html> <html> <head> <...
  • 勾选表单复选框

    2019-01-19 09:54:31
    *开发工具与关键技术:MVC 作者: 撰写时间:2019/1/19 ...2.之前是选中,现在点击就去除checked属性,达到复选框不选中的状态 3.之前是选中,现在点击就添加checked属性,达到复选框选中的状态 ...
  • jquery添加属性checked管用(jquery,prop的使用) $("#xxx").attr("checked","checked"); 但是页面上并没有选中,换成 $("#xxx").prop("checked","checked"); 选中ok. 这里用attr只是为元素...
  • 如题:有些项目中会用到复选框但是可能样式问题或者其他问题不得自己写一个为了完成任务的复选框,我是因为在Vux框架中无法找到类似的复选框按钮,或者相似的但是在布局方面有点不好设计,不好显示,以至于自己...
  • checkbox复选框的默认样式太low,最近做的项目我选择了自定义样式,网上找了不少文章内容冗余,并且并不是都有效果,所以将自己过程整理出来,以备后用。只要在jsp页面和css样式表中添加相应代码即可:一、jsp页面:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,078
精华内容 25,231
关键字:

复选框属性设置不让点击