-
checkbox
2007-07-20 16:05:00CheckBox(复选框)控件用来标识某个选项是否为选定的状态。因此通常用此控件提供“Yes/No”或“True/False”选项。可用分组的CheckBox控件显示多组不同类型的选项,用户可从中一个组选择一个或多个选项。CheckBox控件...CheckBox(复选框)控件用来标识某个选项是否为选定的状态。因此通常用此控件提供“Yes/No”或“True/False”选项。可用分组的CheckBox控件显示多组不同类型的选项,用户可从中一个组选择一个或多个选项。CheckBox控件在工具箱中的图标如图所示:
CheckBox控件与RadioBox(单选框)控件都可以用来指示用户是否对某个选项作出选择。不同之处在于,对于一个组内RadioBox控件,一次只能选择其中的一个,而对于所有的CheckBox控件,则可选定任意数目的复选框。RadioBox控件将在后面进一步介绍。
1.CheckState属性
CheckBox控件的CheckState属性指示复选框处于选定、未选定或禁止状态(暗淡的)中的哪一种。选定时,CheckState设置值为1。
下表为用于设置CheckState属性的数值和相应的Visual Basic常数:设置值 值 常数 UnChecked 0 CheckState.UnChecked Checked 1 CheckState.Checked Indeterminate 2 CheckState.Indeterminate 用户单击CheckBox控件指定选定或未选定状态,然后可检测控件状态并根据此信息编写应用程序以执行某些操作。缺省时,CheckBox控件设置为CheckState.Unchecked。若要预先在一列复选框中选定若干复选框,则应在New或InitializeComponent过程中将CheckState属性设置为CheckState.Checked以选中复选框;可将CheckState属性设置为CheckState.Indeterminate以禁用复选框。例如,有时可能希望满足某条件之前禁用复选框。
2.Click事件
无论何时单击CheckBox控件都将触发Click事件,然后编写应用程序,根据复选框的状态执行某些操作。在下例中,每次单击CheckBox控件时都将改变其Text属性以指示选定或未选定状态:Protected Sub CheckBox1_Click(ByVal sender As Object,ByVal As_ System.EventArgs)Handles CheckBox.Click If CheckBox1.CheckState=CheckState.Checked Then CheckBox1.Text="Checked" ElseIf CheckBox1.CheckState=CheckState.UnChecked Then CheckBox1.Text="UnChecked" End If
注意:如果试图双击CheckBox控件,则将双击当作两次单击,而且分别处理两次单击,即:CheckBox控件不支持双击事件。
3.响应鼠标和键盘
在键盘上使用Tab键并按SpaceBar键,由此将焦点转移到CheckBox控件上,这时也会触发CheckBox控件的Click事件。可以在Text属性的一个字母之前添加连字符,创建一个键盘快捷方式来切换CheckBox控件的选择。
4.增强CheckBox控件的视觉效果
CheckBox控件象Button和RadioButton控件一样,可通过更改Style属性的设置值后使用Image、ImageAlign、ImageIndex和ImageList属性增强其视觉效果。例如:有时可能希望在复选框中添加图标或位图,或者在单击或禁止控件时显示不同的图象等。 -
jquery获取复选框checkbox的值
2018-08-03 13:36:01 -
checkbox选中与取消选择
2018-08-16 11:24:40checkbox选中与取消选择 1.html <form> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name...checkbox选中与取消选择
1.html
<form> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 </form>
2.js
//全选中 $("input[type=checkbox]").prop("checked","checked"); //取消选中 $("input[type=checkbox]").removeAttr("checked");
注意:使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来
-
checkbox的value和checked属性详解
2019-02-27 18:52:25checked属性代表的是当前checkbox是否被选中,如果选中返回true,未选中返回false。和value值无关。 <p><input type="checkbox" name="vehicle" checked/> I have ...一 、checked属性
checked属性代表的是当前checkbox是否被选中,如果选中返回true,未选中返回false。和value值无关。
<p><input type="checkbox" name="vehicle" checked/> I have a car</p> document.getElementById("checkbox1").checked
知识点:
-
checked只代表页面刷新时,checkbox处于选中状态。checked的属性返回true;
此时,点击checkbox使其处于非选中状态,html代码没有变化(checked依然源码上)。但checked的属性返回false; -
html中出现checked字样,代表刷后新选,和checked=“任意值”无关。哪怕checked=“false”,刷新时,checkbox仍然是选中状态。可以理解为checked之后的属性值都是没意义的。
结论:
- html中checked意味着页面加载时,让该checkbox元素的checked属性为true,页面显示选中状态。
- 在提交表单时判断表单是否选中的标准是document.getElementById(“checkbox1”).checked返回true还是false。和html页面内容无关。
二 、value属性
<p><input type="checkbox" name="vehicle" id="checkbox1" /> I have a car</p> alert(document.getElementById("checkbox1").value);
value的属性代表checkbox提交给表单的值。
- value如果没有设置,则默认value的值是“on”。如果设置,自然value就是设置的值。
- value的值和表单是否选中无关。 无论表单是否选中,checkbox的值都是一样的。
※这个点是包括我在内很多人都有误解。
三、表单提交对checkbox处理
请问下面这个表单提交后,提交的name和value是什么呢?
<p><input type="checkbox" name="vehicle" id="checkbox1" checked/> I have a car</p>
答案是不确定
解释:
要点1: 当checkbox处于选中状态时,该checkbox的数据才会被提交。否则,数据不提交。
什么叫做选中状态?
唯一准确的答案是document.getElementById(“checkbox1”).checked返回true;
我已经解释过,html的checked只代表刷新后的状态,不代表提交时的状态。
我如果通过js把该属性设置成false,有的浏览器看到的还是打对号选中的状态。实际checked属性是false。要点2: 表单提交的value是value属性的值。默认是“on”,否则是设置值。无论是否勾选都是一个值。
总结:
上面的表单,如果处于选中状态,提交给server的name-value是"vehicle=on".
如果是非选中状态,提交的是空,也就是不提交该数据。四、实际工作中遇到的问题:
checkbox未选中状态,表单的数据没有提交到后台。
预期checkbox选中提交1,未选中提交0。但发现数据库没有更新,通过以上明白了为什么。解决方法:
在表单提交前,扫描所有的checkbox状态,如果checkbox是checked=true。
把value设置为1.。如果checkbox=false,把value设置为0.具体代码,大家可以百度,有很多人遇到类似问题。解决方法可以有很多种,重点是理解了chebox的原理是什么。
-
-
checkbox不选中传值,checkbox设置默认值
2019-04-17 14:19:44于是在checkbox元素上面增加一个隐藏域,当我们checkbox选中时就会改变其默认值,不选则不改变。 <input type="checkbox" name="status" value="1"> 例: <input type="hidden" name="status"... -
checkbox事件
2019-07-08 15:07:00input id='bigclassauthorize' type='checkbox' onclick='testClickBigCheckBox()'/><input id='smallclassauthorize1' type='checkbox'/> function testClickBigCheckBox(){ var big = docume... -
element-ui el-checkbox的一些坑
2018-08-01 09:31:54el-checkbox @change="handleCheckedCitiesChange" v-model="checkAll" :label="list.eventtypeid" >全选</el-checkbox> <el-checkbox-group v-model=&... -
微信小程序-checkbox
2017-10-02 23:13:22checkbox -
vue、Checkbox多选框、Checkbox属性事件方法、vue Checkbox所有多选框样式、vue Checkbox多选框全部属性...
2019-12-16 11:13:56vue、Checkbox多选框、Checkbox属性事件方法、vue Checkbox所有多选框样式、vue Checkbox多选框全部属性事件方法何时使用代码演示基本用法全选不可用受控的checkboxCheckbox组布局API属性Checkbox事件Checkbox Group... -
CheckBox OnCheckedChange
2016-04-08 15:47:00Checkbox 选择事件 -
WPF CheckBox与WinForm CheckBox 状态的判定
2019-08-27 17:46:56WPF CheckBox与WinForm CheckBox 状态的判定 1.WPF CheckBox check()事件 //只响应选中状态 未选中时不响应 private void CbCheck_Checked(object sender, RoutedEventArgs e) { if(cbCheck.IsChecke... -
美化 checkbox
2016-08-29 17:05:42想必同学们也发现了 原生的checkbox真的 真的好丑啊 所以要美化一下 养养眼。 很简单,说一下美化的原理吧 一:把原生的checkbox设置成‘隐形的’ 二:用另一个美化的元素覆盖原生的checkbox 直接看代码吧... -
wex5 checkbox
2018-06-06 14:55:411.首先将checbox组件放入页面中2.在数组组件中定义chenkbox的状态列,并关联checkbox组件3.并将checkbox组件下的checkvalue值设为1,为选中状态,不选中则为空4.用jquery写点击时间来做状态交互5.效果展示 ... -
微信小程序checkbox的全选以及所有checkbox选中之后的全选
2019-01-14 17:03:13微信小程序checkbox的全选以及所有checkbox选中之后的全选 微信小程序checkbox的全选以及所有checkbox选中之后的全选 第一次写,软件都不懂,直接把代码拷过来了 模板 WXML 订单编号:{{item.orderiD}} {{... -
ASP.NET之CheckBox和CheckBoxList控件
2018-01-29 18:58:19CheckBox控件和CheckBoxList控件 可以使用两种类型的 ASP.NET 控件将复选框添加到 Web 窗体页上:单独的 CheckBox 控件或 CheckBoxList 控件。两种控件都为用户提供了一种输入布尔型数据(真或假、是或否)的方法... -
miniUI控件checkbox
2017-08-20 14:51:42miniui,mini-checkbox,父子窗口值映射,默认选中checkbox -
多个checkbox实现单选的checkbox
2016-02-01 10:11:16将多个checkbox添加进一个list中,设置监听,当有一个checkbox被选中时,循环list ,将其他checkbox的选中状态设置为false: private List boxList; private CheckBox groupBox; private CheckBox sortBox;... -
判断 checkbox 是否选中以及 设置checkbox选中
2016-10-24 14:06:12//判断checkbox 是否选中 $("#id").is(":checked");//选中,返回true,没选中,返回false //设置checkbox为选中状态 $("#id").prop("checked",true); //设置checkbox为不选中状态 $("#id").prop("checked",false); -
微信小程序:CheckBox与CheckBox-Group
2020-05-08 08:41:45可以看到我们需要的额监听函数的属性在checkbox-group中,所以我们需要查看选中了哪些,我们就需要看看这个监听函数中所传的对象有哪些属性 这样我们就指定在对象.detail.value的属性当中是个数组对象 以下是测试代码 ... -
listviewbox和checkbox的结合,点击listview动态显示checkbox
2016-05-04 04:55:34listviewbox和checkbox的结合,点击listview动态显示checkbox 勾选了checkbox之后自动选中勾选的项目 -
checkBox 选中 移除
2018-10-16 18:54:55checkBox 选中 移除 (1)使用原生JavaScript判断是否选中checkbox框 (js) <input type="checkbox" id="test" class="test">同意 <script> // ... -
bootstrap datatable checkbox
2017-08-31 02:27:31<td align='center'><input type='checkbox' name='chkId' value='123'> <td><%=test.getId()%> <td><%=test.getName()%> <td><%=test.getDetail()%> <td><%=test.getRemark()%... -
JS判断checkbox是否全被选中,当手动将所有checkbox都选中时,全选checkbox自动选中
2018-11-13 20:04:39JS判断checkbox是否全被选中,当手动将所有checkbox都选中时,全选checkbox自动选中 html代码 <input type="checkbox" id="topBtn">全选/取消 <ul> <li&... -
CheckBox属性
2016-08-28 13:35:09多项选择CheckBox 组件也被称为复选框,该组件常用于某选项的打开或者关闭。层次关系如下:java.lang.Object android.view.View android.widget.TextView android.widget.Button android.widget.CompoundButton -
改变checkbox样式
2019-01-17 10:50:12checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式 首先建立一个input标签然后在建立一个label标签然后用label标签连接checkbox标签 &amp;amp;amp;lt;input id=&amp;amp;quot... -
checkbox选中背景色改变(checkbox美化)
2018-01-24 20:21:25纯CSS3实现自定义美化复选框和单选框在线演示 .my-check-.my-check-label{ ....regular-checkbox { display: none; } .regular-checkbox + .my-check-label { background-color: #fafafa; border: -
bootstrap checkbox
2014-07-16 15:42:22在使用bootstrap库中的checkboxlistrow时,我想要根据checkbox是否至少选中了一个选项来确定页面的跳转,即需要在js中操作checkbox。这样就存在一个问题,一般的checkbox对应的name等是一个数组,可以对其进行相应的... -
Android Checkbox详解
2016-02-12 11:35:14今天我就来聊聊android控件中拥有着0和1这种特性的魔力控件checkbox. 先来讲讲Checkbox的基本使用.在XML中定义. xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ -
WPF如何 在datagrid中添加CheckBox,以及checkbox的使用方法
2020-03-04 17:01:04checkbox 在WPF 在datagrid添加checkbox实现全选 在WPF 在datagrid添加checkbox,checkbox这个控件无法改变它的大小,至少我还没找放到方法 如果想让checkbox居中一下的话,可以调整他的margin如:Margin="40...
-
soul源码学习(三)-dubbo示例
-
Github的提交
-
神奇又好玩的协方差矩阵
-
关于C++的链表操作
-
数据结构实验报告.docx
-
(新)备战2021软考网络规划设计师培训学习套餐
-
Visual Assist X 1837 特别版【VC6】
-
Linux定时任务
-
FFmpeg4.3黄金系列课程:c++版
-
【CN105】WebTechnology笔记1 ——网站访问流程及telnet访问网站实例
-
(新)备战2021软考信息安全工程师通关套餐
-
前端实战案例之石头剪刀布游戏(零基础入门)
-
【Python3】Python3+常用pip3命令
-
彻底学会正则表达式
-
Datawhale 第二次打卡
-
JVM的即时编译器及优化,一篇文章就够了
-
hadoop自动化运维工具Ambari应用实践
-
Soul 源码解析(一):Soul网关里的负载均衡策略
-
Kotlin协程极简入门与解密
-
电工学电子技术(上册)重点总结