利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
更新時(shí)間：2016年05月31日 11:41:31 投稿：jingxian
下面小編就為大家?guī)硪黄胘Query實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
jQuery有些版本中實(shí)現(xiàn)CheckBox全選/全不選/反選會(huì)有bug，經(jīng)測(cè)試jquery-1.3.1.js–>測(cè)試通過，jquery-1.5.1.js–>測(cè)試不通過。
實(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àn)不出JQ飄逸的感覺。
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用js原生代碼，簡單實(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全選/全不選/反選的簡單代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
- jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
- jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
- jQuery實(shí)現(xiàn)全選、反選和不選功能
- JQuery選中checkbox方法代碼實(shí)例（全選、反選、全不選）
- jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
- 基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
- jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
- 基于jquery實(shí)現(xiàn)復(fù)選框全選，反選，全不選等功能
- jQuery實(shí)現(xiàn)全選、反選和不選功能的方法詳解
相關(guān)文章
用jquery實(shí)現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)
學(xué)校日歷有以下幾個(gè)特點(diǎn)：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點(diǎn)擊該日期顯示本日事件。2010-01-01
jQuery插件開發(fā)精品教程(讓你的jQuery更上一個(gè)臺(tái)階)
這篇jQuery插件開發(fā)教程是小編見過的最詳細(xì)的了，每個(gè)解說都很好，對(duì)于想做增強(qiáng)插件的朋友確實(shí)不錯(cuò)的參考資料，特分享下，方便需要的朋友2015-11-11
jquery獲取input type=text中的值的各種方式(總結(jié))
下面小編就為大家?guī)硪黄猨query獲取input type=text中的值的各種方式(總結(jié))。小編覺的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
jQuery.ajax()功能比較強(qiáng)大，可配置的參數(shù)比較多，本文主要對(duì)這個(gè)方法的注意事項(xiàng)進(jìn)行總結(jié)。有相同需求的童鞋們也來仔細(xì)看看吧，希望對(duì)大家能有所幫助2014-11-11
jQuery+json實(shí)現(xiàn)的簡易Ajax調(diào)用實(shí)例
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)的簡易Ajax調(diào)用,結(jié)合實(shí)例形式分析了jQuery基于ajax實(shí)現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下2015-12-12
Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
easyui簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了easyui簡介，詳細(xì)的介紹了什么是easyui和easyui的用法，有興趣的可以了解一下2017-07-07
本文使用大名頂頂?shù)膉query來實(shí)現(xiàn)QQ校友的DIV模擬窗口，QQ的檢驗(yàn)一些都是非常棒的2010-03-03
關(guān)鍵詞匹配搜索想必大家一定會(huì)想到百度，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
擴(kuò)展jQuery插件和方法的作用是非常強(qiáng)大的，它可以節(jié)省大量開發(fā)時(shí)間。這篇文章將概述jQuery插件開發(fā)的基本知識(shí)，最佳做法和常見的陷阱,需要的朋友可以參考下2016-11-11