checkbox控件应用

简单介绍一下checkbox控件的应用
checkbox复选框，也就是提供用户多选择的控件（例如:爱好等）。一般同种类checkbox声明相同name属性，以便提交后台处理。以下简单简绍checkbox用法。
1.html 便签书写
<input name="Fruit" type="checkbox" value="" />
这里介绍一下checkbox的几种比较少用的属性
1.1属性介绍
accessKey属性-设置或返回 checkbox 的快捷键。（注释：请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。） -摘自W3C
<input type="checkbox" accesskey="c" id="check1" /> 
上面的例子,按Alt+C该checkbox就会被checked


1.2 label + checkbox 应用
有时候没有对checkbox 的style设置长宽，用户点击checkbox难度就会增大，影响用户体验。所以一般的checkbox和和label一起使用
<label>苹果<input type="checkbox" accesskey="c" id="check1" /> </label>
<label>橙子<input type="checkbox" accesskey="d" id="check2" /> </label>
只要点击label，label内的checkbox就会被选中


2.JS运用
2.1判断是否被选中
<对象.checked>
<label>橙子<input type="checkbox" accesskey="d" id="check2" checked> </label>
<script>
if(document.getElementById("check2").checked){
alert("你选择了橙子！");
}
</script>
获取多个checkbox被选中内容
<label>苹果<input type="checkbox" name="fruit[]" value="苹果" /> </label>
<label>橙子<input type="checkbox" name="fruit[]" value="橙子" checked /> </label>
<label>香蕉<input type="checkbox" name="fruit[]" value="香蕉" checked /> </label>
<label>葡萄<input type="checkbox" name="fruit[]" value="葡萄" checked /> </label>
<script>
var fruitobj = document.getElementsByName("fruit[]");
for (key in fruitobj) {
if(fruitobj[key].checked) {
alert(fruitobj[key].value);
}
}
</script>
全选、反选、取消选择
<meta charset="UTF-8">
<label>苹果<input type="checkbox" name="fruit[]" value="苹果" /> </label>
<label>橙子<input type="checkbox" name="fruit[]" value="橙子" checked /> </label>
<label>香蕉<input type="checkbox" name="fruit[]" value="香蕉" checked /> </label>
<label>葡萄<input type="checkbox" name="fruit[]" value="葡萄" checked /> </label>
<label id="checkedall">全选</label>
<label id="cancelall">取消</label>
<label id="cancelf">反选</label>
<script>
window.onload = function() {
var checkedall = document.getElementById("checkedall");
var cancelall = document.getElementById("cancelall");
var cancelf = document.getElementById("cancelf");
var fruitobj = document.getElementsByName("fruit[]");
checkedall.onclick = function() {
for (key in fruitobj) {
fruitobj[key].checked = true;
}
}
cancelall.onclick = function() {
for (key in fruitobj) {
fruitobj[key].checked = false;
}
}
cancelf.onclick = function() {
for (key in fruitobj) {
if(fruitobj[key].checked) {
fruitobj[key].checked = false;
}
else {
fruitobj[key].checked = true;
}
}
}

}
</script>
3.JQ运用
3.1.点击
object.click(function(){});
3.2获取该值
object.each(function(){});
<meta charset="UTF-8">
<label>苹果<input type="checkbox" class="checkboxclass" name="fruit[]" value="苹果" /> </label>
<label>橙子<input type="checkbox" class="checkboxclass" name="fruit[]" value="橙子" checked /> </label>
<label>香蕉<input type="checkbox" class="checkboxclass" name="fruit[]" value="香蕉" checked /> </label>
<label>葡萄<input type="checkbox" class="checkboxclass" name="fruit[]" value="葡萄" checked /> </label>
<label id="checkedall">全选</label>
<label id="cancelall">取消</label>
<label id="cancelf">反选</label>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$(".checkboxclass").each(function(){
//使用obj.is(":checked")判断该对象是否选中
if($(this).is(":checked")) {
//alert($(this).val());
}
});
$("#checkedall").click(function(){
$(".checkboxclass").attr("checked","true"); //也可以使用 $(".checkboxclass").attr("checked","checked");
});
$("#cancelall").click(function(){
$(".checkboxclass").removeAttr("checked");
})
//获取选中对象
$(".checkboxclass:checked").val();
});
</script>