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>