checkbox探究
介绍checkbox
checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute (which can only be set programmatically) to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).
不能用眼睛判断checked
<input type="checkbox"/>
无论我如何点击，f12出来的源代码都没有改变，并不显示checked，这是需要注意的一个地方，我们不能在前台通过看f12来判断checked
通过js动态判断checked
<input type="checkbox" id="t"/>
<input type="button" id="s"/>
<script>
var s=document.getElementById("s");
s.onclick=function() {
console.log(document.getElementById("t").checked);
}
</script>
可以通过document.getElementById("").checked看输出的true||false来判断
高级用法
<style>
#bg{
width: 300px;
height: 300px;
background-color: #00cccc;
}
#box:checked+#bg{
background-color: #00ee00;
}
</style>
<body>
<input type="checkbox" id="box"/>
<div id="bg"></div>
</body>
这里的关键点是#box:checked，意思就是我们的checkbox被点击后，虽然前文我们提过f12无法看到checked的改变，但此处的css的checked选择器是可以起作用的。
checkbox被点击后，变成checked，这时+#bg{ background-color: #00ee00; }就起作用了，+选择器指代选择之后的元素，所以此处就是匹配到我们的bg，注意：如果这里不用+，而是直接使用空格选择器是不生效的
#box:checked #bg{
background-color: #00ee00;
}
因为空格选择器匹配的是后代元素，而此刻的bg明显是box的同代元素，所以此处需要使用+或者~
接回原来那里，点击checkbox之后，bg的背景色发生改变，至此，整个简单的效果完成。
效果虽然简单，但同时提供了一种不需要js就可以做到点击改变效果的新思路。
checkbox配合label标签的使用
<label><input type="checkbox" id="cbox1" value="first_checkbox"> This is the first checkbox</label><br>
<input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">This is the second checkbox</label>
This is the first checkbox
This is the second checkbox
checkbox多选以及传数据
checkbox一般用来做复选框
<form action="">
你最爱的水果
<p>
<input type="checkbox" name="fruits" value="apple"/>苹果<br>
<input type="checkbox" name="fruits" value="orange"/>橙子<br>
<input type="checkbox" name="fruits" value="pear"/>梨<br>
<input type="checkbox" name="fruits" value="watermelon"/>西瓜<br>
</p>
<input type="submit" value="提交"/>
</form>
你最爱的水果
苹果
橙子
梨
西瓜
后台会接收到选择的checkbox，数据保存在fruits中，遍历数组获得
扩展：radio的用法
A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at a time.
<FORM ACTION="../cgi-bin/mycgi.pl">
What size pizza?
<P>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="M" CHECKED>medium<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large
</P>
<INPUT TYPE=SUBMIT VALUE="submit">
</FORM>
What size pizza?
small
medium
large
Note that it is the content of the VALUE attribute that is sent to the CGI.
If no CHECKED attribute is used, different browsers have different ways of displaying the initial state of a series of radio buttons. Netscape and MSIE have none of the buttons selected. Mosaic selects the first button.
也就是说，上述的代码，传给后台的值就是name=pizzasize,而这个name对应的value就是前台页面点击选中的按钮对应的value，我们还可以创建多组radio，如下
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Wine<br>
Milk
Butter
Cheese
Water
Beer
Wine
radio多选
radio无法做多选，要想实现多选用checkbox
radio的高级用法
radio也是可以像前文的checkbox那样使用的。
#bg{
width: 300px;
height: 300px;
background-color: #00cccc;
}
#dio:checked~#bg{
background-color: #00ee00;
}
<input type="radio" id="dio"/>
<div id="bg"></div>
注意：radio与checkbox不同，radio选择后，无法再次点击取消选择，除非存在两个radio供交互选择才能取消，这是radio的特性，无法点击原来的radio取消选择。
select介绍
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
Volvo
Saab
Fiat
Audi
全文完，下文，使用checkbox实现按钮滑动效果。
checkbox探究的更多相关文章
- jQuery获取当前checkbox的值
背景: 目前想实现登录的“记住我”功能,需要获取当前checkbox是否被点击,百度了一通,全是多个复选框选中了哪一个的解答, 迫于无奈,自己在W3school上面查询了checkbox的所有属性,并 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- [原] KVM 虚拟化原理探究（1）— overview
KVM 虚拟化原理探究- overview 标签(空格分隔): KVM 写在前面的话 本文不介绍kvm和qemu的基本安装操作,希望读者具有一定的KVM实践经验.同时希望借此系列博客,能够对KVM底层 ...
- [原] KVM 虚拟化原理探究 —— 目录
KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...
- [原] KVM 虚拟化原理探究（6）— 块设备IO虚拟化
KVM 虚拟化原理探究(6)- 块设备IO虚拟化 标签(空格分隔): KVM [toc] 块设备IO虚拟化简介 上一篇文章讲到了网络IO虚拟化,作为另外一个重要的虚拟化资源,块设备IO的虚拟化也是同样 ...
- [原] KVM 虚拟化原理探究（5）— 网络IO虚拟化
KVM 虚拟化原理探究(5)- 网络IO虚拟化 标签(空格分隔): KVM IO 虚拟化简介 前面的文章介绍了KVM的启动过程,CPU虚拟化,内存虚拟化原理.作为一个完整的风诺依曼计算机系统,必然有输 ...
- [原] KVM 虚拟化原理探究（4）— 内存虚拟化
KVM 虚拟化原理探究(4)- 内存虚拟化 标签(空格分隔): KVM 内存虚拟化简介 前一章介绍了CPU虚拟化的内容,这一章介绍一下KVM的内存虚拟化原理.可以说内存是除了CPU外最重要的组件,Gu ...
- [原] KVM 虚拟化原理探究（3）— CPU 虚拟化
KVM 虚拟化原理探究(3)- CPU 虚拟化 标签(空格分隔): KVM [TOC] CPU 虚拟化简介 上一篇文章笼统的介绍了一个虚拟机的诞生过程,从demo中也可以看到,运行一个虚拟机再也不需要 ...
- [原] KVM 虚拟化原理探究（2）— QEMU启动过程
KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...
随机推荐
- Shell中的正则表达式及字符串处理
shell里一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所 ...
- BZOJ 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典
题目 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 401 Solv ...
- ASP.NET 内置对象涉略
一.ASP.NET中内置的常用对象的介绍 本文列举了ASP.NET 的八个内置对象,其中前五个是比较常用的. 1.Response Response 对象用于从服务器向用户发送输出的结果. Write ...
- error: property's synthesized getter follows Cocoa naming convention for returning 'owned' objects
出现这样的情况,主要是属性名中包括 keyword. You can solve this by: Renaming that property: @property (strong, nonato ...
- ThinkPHP - 关联模型 - 一对多
使用之前,先引入文件夹,否则相应的功能不能实现. 如果对thinkPHP不精通,使用或开发的时候,最好直接使用完成版本的ThinkPHP. 关系模型定义: <?php /** * 继承自 Rel ...
- POJ 3276 Face The Right Way 翻转(开关问题)
题目:Click here 题意:n头牛排成一列,F表示牛面朝前方,B表示面朝后方,每次转向K头连续的牛的朝向,求让所有的牛都能面向前方需要的最少的操作次数M和对应的最小的K. 分析:一个区间反转偶数 ...
- BestCoder Round #50 (div.1) 1003 The mook jong (HDU OJ 5366) 规律递推
题目:Click here 题意:bestcoder 上面有中文题目 分析:令f[i]为最后一个木人桩摆放在i位置的方案,令s[i]为f[i]的前缀和.很容易就能想到f[i]=s[i-3]+1,s[i ...
- BZOJ 1925: [Sdoi2010]地精部落( dp )
dp(i,j)表示1~i的排列中, 以1~j为开头且开头是下降的合法方案数 这种数列具有对称性, 即对于一个满足题意且开头是上升的n的排列{an}, 令bn = n-an+1, 那么{bn}就是一个满 ...
- 网络编程TCP协议-聊天室
网络编程TCP协议-聊天室(客户端与服务端的交互); <span style="font-size:18px;">1.客户端发数据到服务端.</span> ...
- lnmp-zabbix
wget http://down1.chinaunix.net/distfiles/freetype-2.4.7.tar.bz2 tar -jxvf freetype-2.4.7.tar.bz2 cd ...