精华内容
下载资源
问答
  • 复选框的作用是什么
    2021-06-10 16:43:13

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

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

    option a

    option b

    option c

    option a

    option b

    option c

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

    option a

    option b

    option c

    option a

    option b

    option c

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

    注:文章由seo技术http://www.618sale.com/ 进行编辑,转载需注明来源。

    更多相关内容
  • 判断单选框或复选框是否选中</title> </head> <body> <input name=”radio1″ type=”radio” value=”test”> <button onClick=”alert(‘单选项’+(document....
  • 用Axure RP 8.0做的原型设计列子,作用复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。
  • 首先: 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> [removed][removed] layui.use('form',function){ ...
  • 用于 jQuery 和 Zepto 的高度可定制的复选框和单选按钮。 jQuery 和 Zepto JavaScript 库支持单个文件。 iCheck 像构造函数一样使用复选框和单选按钮。 它用一个 div 包装每个输入,该 div 可以由您自定义或使用可用...
  • 有时候是只想告知用户这个地方是可以进行勾选操作的而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果,具体实现方法如下
  • 1 实现效果 2 知识点讲解 ...标签在单选按钮和复选按钮上经常被使用,使用该标签后,你点击label标签内的内容,也可以选中对应的单选按钮或复选按钮。 标签语法格式: 关联控件的id xss=removed>
  • 在中间部分,有一个垂直的复选框数组(我用它来设计它),我跟着许多在线教程,这些教程引导我使用这个网站链接.我下载源代码教程,理解它,复制css代码,根据我的客户要求定制我的更改.一切看起来都很好 – 除了试图勾选...

    我有以下静态html文件,我花时间为我们的客户建立一个CMS Web应用程序站点.

    在中间部分,有一个垂直的复选框数组(我用它来设计它),我跟着许多在线教程,这些教程引导我使用这个网站链接.

    我下载源代码教程,理解它,复制css代码,根据我的客户要求定制我的更改.

    一切看起来都很好 – 除了试图勾选复选框.

    什么都没发生!

    单击时不会选中该复选框!

    我无法弄清楚为什么它不起作用,因为它应该像教程一样.

    有人可以告诉我我做错了什么吗?

    这是我的代码.

    input[type=checkbox].input-checkbox{

    width: 1px;

    height: 1px;

    position: absolute;

    overflow: hidden;

    clip: rect(0,0,0,0);

    margin: -1px;

    padding: 0;

    border: 0;

    }

    input[type=checkbox].input-checkbox + label.input-label{

    border: 2px solid #58585A;

    display: inline-block;

    width: 20px;

    height: 20px;

    line-height: 15px;

    background-repeat: no-repeat;

    font-size:15px;

    vertical-align: middle;

    cursor: pointer;

    }

    input[type=checkbox].input-checkbox:checked + label.input-label{

    background-position: 0 -20px;

    }

    .input-label{

    background-image: url('/images/tickbox.png');

    }

    非常感谢!

    展开全文
  • 本文主要介绍ASP.NET中CheckBox复选框控件的使用,并举例演示其用法,希望对大家有所帮助。
  • JS删除复选框选中行

    千次阅读 2020-04-08 19:35:58
    在日常报表制作中,我们会时长遇到一些需要批量操作的功能,例如数据的批量删除,而此时往往跟复选框挂钩;一般是在报表中,我们可以通过复选框的形式进行勾选,然后通过按钮或者超链接触发JavaScript事件,获取复选...

    在日常报表制作中,我们会时长遇到一些需要批量操作的功能,例如数据的批量删除,而此时往往跟复选框挂钩;一般是在报表中,我们可以通过复选框的形式进行勾选,然后通过按钮或者超链接触发JavaScript事件,获取复选框选中行,在进行一键删除。

    接下来,就来讲解一下,如何通过获取复选框,获取选中行数据,进行一键删除行。

    1、报表设计

    本报表的应用是用于文件的上传和数据整理入库,此处示例多文件删除功能。

    2、JavaScript事件

    代码如下:

    //获取复选框
    var $span = $(".mr-checkbox-checkon");
    var darray = [];
    var array = [];
    var $tds = $("td").has($span);
    var len = $tds.length;
    var flat=true;
    for (var i = 0; i < len; i ++) {
    	if($($span[i]).closest('tr').css('display')!='none'){
    		flat=false;
    		break;
    	}
    }
    if(flat){
    	len=0;
     }
    if(len<=0){
    	alert("请选择记录!");
    	return;
    }
    //获取选中行
    for (var i = 0; i < len; i ++) {
       var id = $($tds[i]).attr("id");
       if (id) {
       	var rownum =contentPane.curLGP.getTDRow($tds[i])-1;
       	var wjid=contentPane.getCellValue(2,rownum);
         array.push(wjid);
       	 darray.push(id);
       	}
    }
    //删除选中行
    contentPane.deleteReportRC(null,darray);
    //array是我用来做其他操作用的,读者可以根据自身情况获取数据和操作

    3、效果图

    展开全文
  • 小tips:单复选框与文字对齐问题的研究

    千次阅读 多人点赞 2021-08-04 09:27:24
    以前来说,单复选框与后跟文字的对其问题其实大多出现在 `font-size` 为 `12px` 的场景下。在现在默认和常用的 `14px`下其实应该是不会出现的。 随着浏览器的不断发展,对css的支持程度以及不同的实现方式,我们大概...

    以前来说,单复选框与后跟文字的对其问题其实大多出现在 font-size12px 的场景下。在现在默认和常用的 14px下其实应该是不会出现的。
    随着浏览器的不断发展,对css的支持程度以及不同的实现方式,我们大概要时刻注意相关问题的产生。

    场景复现

    笔者遇到这个问题还是因为elementUI ——
    在我司的一个项目场景中,我们需要判断优惠券的可用时段,有两个选项:不限或是在周一到周末进行选择。它们的排布是这样的:

    <div class="form-li fl--cb">
      <div class="form-left fl--b">可用时段:</div>
      <div class="form-right">
        <FormSelect :disabled="isModify" sel_time="可用时段" :use_list="['周一','周二','周三','周四','周五','周六','周日']"></FormSelect>
      </div>
    </div>
    

    其中 FormSelect 是笔者自己封装的组件,用于在很多地方复用这个场景!

    首先,
    这里css中对齐用的是 flex 中的align-item: baseline; —— 基于图中的布局要求,我们是不适合用center或其它属性的。
    为什么不用flex-start
    我们来看一下各自的效果:

    • flex-start:与文档流方向相关。默认表现为容器顶部对齐。

    效果:(将鼠标放在控制台元素上)
    flex-start

    • baseline:表现为所有flex子项都相对于flex容器的基线(在容器中放一个字母x,它的下边缘)对齐。

    x

    效果:

    baseline

    这样左右两列是对齐了,但是问题来了:你有没有发现在图中文字是和 radio 的按钮有一些高低差异的?
    这是因为radio框和文字的“重心”是不一样的 —— 仔细看图中效果的话不难看出:左边文字和右边第一行的文字是对齐的,但是右边文字的radio框却比它们要高出一些!

    即使针对上面 flex-start 时的样式,如果将其拿到IE下,我们将控制台 - 布局 - 弹性容器下的按钮打开会看到:
    flex-start-2
    记得张大(@张鑫旭)说过,radio其实并不是单单的一个圈,它和后面的文字有一个默认间距是因为自带一个margin。在IE8前更过分,它其实外部还有一个隐藏的border!

    所有单复选框产生的对齐问题基本都是由baseline属性值造成的!

    如何解决

    1. 有个非常巧妙的方法:字体。将选择框后面的文字字体设置为“Tahoma”,然后修改样式为:(包括下面的所有方法都是针对框本身修改样式)
    .xxx{
    	vertical-align:middle;
    	margin-top:0;
    }
    

    但是我司的css架构在先,字体样式是全局复用的。遵循“极限复用”的思想笔者不能重新设置,这种方法只能作罢。

    这种方法忘了在哪看的了,效果出奇,一直记录在案。

    1. 利用 vertical-align 属性

    vertical-align 作用于行内/行内块元素,一般用于“垂直居中”。它的默认值是baseline,基线对齐。
    不同的是,这个属性的负值是控制往下偏移,而正值表示往上偏移。而且数值大小全部都是相对于基线位置计算的!
    所以说:vertical-align 是一个偏移属性!它并不能造成绝对的“居中”。但是我们却可以以此来解决像素级的偏差:

    .xxx{
    	vertialc-align:-3px;
    }
    

    这种方法以前人人网也用过,效果很好!
    特别提示:如果您的项目中使用了 line-height 属性,我也是非常建议你使用 vertialc-align 的:毕竟 vertical-align的百分比值(的计算)取决于元素上的line-height值

    一般来说,对字符来讲,font-size 越大,基线位置越靠下。

    1. 如果font-size值 ≥ 14px,而且设置了 vertical-alignmiddle,那么可以试试margin-top偏移解决:
    .xxx{
    	vertical-align:middle;
    	margin-top:-2px;
    	margin-bottom:1px;
    }
    
    1. 如果设置了height,可以为radio/checkbox框也设置height(必要时可以加上width属性)。其大小和元素的font-size值对应(控制台自己根据情况调整):

    比如:设置了 font-size:14px; 可设置单复选框的height:13px; 并且为单复选框添加css属性:vertical-align:text-top;

    展开全文
  • 今天就来了,今天就讲讲通过复选框...今天来将一个 复选框复选框 可以作为 一种状态记录,比如 登录页面有一个复选框 做记住密码的操作。 还有一种就是采集信息的时候 可以选择多个选项。 下面我们开始今天...
  • 纯CSS实现自定义单选框和复选框

    千次阅读 多人点赞 2020-07-14 06:49:14
    2.4 CSS3 :checked 选择器 :checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。 2.5 CSS element+element 选择器 element+element 选择器用于选择(不是内部)指定的第一个元素之后紧跟的...
  • QCheckBox----复选框

    2022-02-18 15:11:11
    1、QCheckBox----复选框:给用户提供若干选项的多选操作。(可以都选、可以都不选或者选中部分),左侧有一个方框图标,单选按钮左侧都是圆圈。 功能作用: 设置是否三态:setTristate(),设置复选框状态:...
  • HTML--使用单选框、复选框,让用户选择,自己实际应用的总结
  • 复选框和单选框的理解

    千次阅读 2019-07-06 19:49:07
    html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。 当type="radio"时,控件为单选框 当type="checkbox"时,控件为复选框 了解下...
  • 在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选...
  • Element-ui是现在国内用得比较多的ui框架,其table组件提供了... 递归在为每一个节点添加checked以及获取上述数据的id都有使用到,本文仅展示其在父子树关联这方面的作用。如果我的文章帮到了你,请给我点个赞吧!!!
  • 来认识一下单选按钮和复选框吧!

    千次阅读 2020-08-29 19:06:58
    今天这篇文章讲的内容比较简单——选按钮和复选框,单选按钮和复选框在网页中很常见。在应用程序中,复选框和单选按钮都是用来表示状态,在运行期间可以改变其状态。 单选按钮 单选按钮是表单系统的一个基本元素。...
  • 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交发请求。先查看效果:可以看到初始页面的此用户被赋予的角色只有一个“核算经办”,如图1...
  • 微信小程序|复选框

    千次阅读 2020-03-19 00:00:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述1 什么是复选...
  • vue+element-ui复选框勾选失败 使用vue.set()方法或他的别名this.$set()方法解决 问题现象 复选框勾选后无效果,但是数据已经更改。 //错误代码 <template slot-scope="scope"> <el-checkbox v-model=...
  • 我的每一个复选框 是 利用 data声明的数组进行循环 遍历出来的 然后当我点击全选及反选的时候 我操作了data中的item 遍历修改了 ischeck属性 页面上也是利用这个属性显示选中/非选中 出现的bug 当我反复点击了...
  • element组件点击复选框不选中问题

    千次阅读 2020-12-28 12:02:26
    element组件点击复选框不选中问题 问题复现 代码呈现 问题原因 计算属性以上用法属于get,不能直接修改,计算属性想要修改需要使用set方法。...element复选框组件绑定的值只能在data中定义 ...
  • 不知道小伙伴们在使用复选框(checkbox)的时候有没有觉得默认的样式实在太丑了,自己想换一个好看点的样式又感觉挺麻烦的,前几天博主就遇到了这个麻烦,然后翻阅了书籍找到了解决方法,现在和大家分享一下 ...
  • html的单选框与复选框

    千次阅读 2017-06-19 12:20:30
    使用语法:值" name="名称" checked="checked"/...当 type=”checkbox” 时,控件为复选框2、value:提交数据到服务器的值(给后台程序PHP使用)3、name:为控件命名,给ASP、PHP等后台程序使用 4、checked:当设置 che
  • vue封装复选框组件

    千次阅读 2019-05-16 23:55:20
    前言 ...checkbox复选框组件,使checkbox有三种状态: checked:ture (选中) / false (未选中) , indeterminate (部分选中) 1.利用slot插槽 2.在同一文件中用到父子通信 $emit $on 本文章的 gith...
  • 我们接着分享关于input标签的内容,今天说的是复选框,单选按钮只能从列表中选择一项,其他互斥,而复选框可以从选项中选择一项或多项,是并行的概念。 语法: <input type="checkbox" value="复选框值...
  • 18、HTML复选框checkbox

    千次阅读 2020-10-30 10:36:15
    正常情况下,单选按钮只能实现选中一个的效果。例如爱好字段,这时用户想选择多个,就不能再使用单选按钮了,可以使用 HTML 中的复选框。...1. 复选框的常用属性 复选框的常用属性: checked ----用来规定在页面加载时
  • 复选框插件源于项目中需要在富文本使用复选框,但复选框在chrome浏览器中可以点击,在火狐浏览器中却怎么点都无法触发click事件,不起作用,在一番折腾后没有解决掉这个问题,最后想到了用图片背景当作复选框,写...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,609
精华内容 26,243
关键字:

复选框的作用是什么