下面小編就為大家?guī)?lái)一篇利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
jQuery有些版本中實(shí)現(xiàn)CheckBox全選/全不選/反選會(huì)有bug，經(jīng)測(cè)試jquery-1.3.1.js–>測(cè)試通過(guò)，jquery-1.5.1.js–>測(cè)試不通過(guò)。
實(shí)現(xiàn)CheckBox全選/全不選/反選代碼如下：
代碼如下:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>復(fù)選框全選/全不選/反選</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>
<script type="text/javascript">
/**
* 全選
*
* items 復(fù)選框的name
*/
function allCkb(items){
$('[name='+items+']:checkbox').attr("checked", true);
}
/**
* 全不選
*
*/
function unAllCkb(){
$('[type=checkbox]:checkbox').attr('checked', false);
}
/**
* 反選
*
* items 復(fù)選框的name
*/
function inverseCkb(items){
$('[name='+items+']:checkbox').each(function(){
//此處用jq寫(xiě)法頗顯啰嗦。體現(xiàn)不出JQ飄逸的感覺(jué)。
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用js原生代碼，簡(jiǎn)單實(shí)用
this.checked=!this.checked;
});
}
</script>
</head>
<body>
<input type='checkbox' name='ckb' value="0"/>白羊座
<input type='checkbox' name='ckb' value="1"/>獅子座
<input type='checkbox' name='ckb' value="2"/>水瓶座
<input type='checkbox' name='ckb' value="3"/>射手座<br/>
<input type="button" onclick="allCkb('ckb')" value="全 選"/>
<input type="button" onclick="unAllCkb()" value="全不選"/>
<input type="button" onclick="inverseCkb('ckb')" value="反 選"/>
</body>
</html>
以上這篇利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡(jiǎn)單代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試