簡(jiǎn)單實(shí)現(xiàn)jQuery多選框功能

更新時(shí)間：2017年01月09日 14:58:27 作者：Zerone1993

這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jQuery多選框功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Jquery多選框的基本操作：支持全選、反選、取消全選的功能

HTML正文：

<input type="checkbox" id="c1">全選/全不選<br>
興趣愛(ài)好：<br>
<input type="checkbox" name="interst" value="basketball">籃球
<input type="checkbox" name="interst" value="football">足球
<input type="checkbox" name="interst" value="bedminton">羽毛球<br>
<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="全不選">
<input type="button" id="b3" value="反選">
<input type="button" id="b4" value="顯示">

Javascript操作代碼：

$("#c1").click(function(){
if(this.checked){
  $("input[name='interst']").attr("checked","checked");
}else{
  //$("input[name='interst']").attr("checked",""); //等價(jià)于
  $("input[name='interst']").removeAttr("checked");
}
});

$("#b1").click(function(){
  $("input[name='interst']").attr("checked","checked");
});

$("#b2").click(function(){
  $("input[name='interst']").attr("checked","");
});

$("#b3").click(function(){
  $("input[name='interst']").each(function(){
  if(this.checked){
    this.checked="";
  }else{
    this.checked="checked";
  }
  });
});

$("#b4").click(function(){
$("input[name='interst']:checked").each(function(){
  alert(this.value);
});
});

效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺析jquery某一元素重復(fù)綁定的問(wèn)題
本篇文章主要是對(duì)jquery某一元素重復(fù)綁定的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下
2016-08-08
jQuery實(shí)現(xiàn)回車(chē)鍵（Enter）切換文本框焦點(diǎn)的代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)回車(chē)鍵（Enter）切換文本框焦點(diǎn)的代碼實(shí)例,需要的朋友可以參考下
2014-05-05
jQuery對(duì)象與DOM對(duì)象之間的轉(zhuǎn)換方法
剛開(kāi)始學(xué)習(xí)jQuery，可能一時(shí)會(huì)分不清楚哪些是jQuery對(duì)象，哪些是DOM對(duì)象。至于DOM對(duì)象不多解釋?zhuān)覀兘佑|的太多了，下面重點(diǎn)介紹一下jQuery，以及兩者相互間的轉(zhuǎn)換。
2010-04-04
ajax請(qǐng)求data遇到的問(wèn)題分析
本篇文章為大家分析了在ajax進(jìn)行數(shù)據(jù)請(qǐng)求的時(shí)候遇到的問(wèn)題以及解決辦法，一起參考學(xué)習(xí)下。
2018-01-01
基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變
在實(shí)際開(kāi)發(fā)中經(jīng)常會(huì)遇到數(shù)據(jù)沒(méi)發(fā)生改變是，由于用戶不小心點(diǎn)擊保存，這樣導(dǎo)致數(shù)據(jù)庫(kù)的日志增大；還有數(shù)據(jù)填寫(xiě)好后，忘了添加保存直接關(guān)閉頁(yè)面離開(kāi)。
2011-04-04
jQuery ajax應(yīng)用總結(jié)
Ajax在Web應(yīng)用中的作用越來(lái)越大，許多工具都包含了對(duì)這一功能的使用，以下是對(duì)這些常用工具中Ajax的典型實(shí)例.
2016-06-06
為jQuery添加Webkit的觸摸的方法分享
這段代碼是我在做13年一份兼職的時(shí)候無(wú)聊加上去的，為jQuery添加觸摸事件的支持。因?yàn)樽龅糜悬c(diǎn)無(wú)聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁(yè)+JS touch兼容了移動(dòng)設(shè)備，主要是Webkit的移動(dòng)設(shè)備
2014-02-02
關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測(cè)試下。
2010-04-04
jquery插件pagination實(shí)現(xiàn)無(wú)刷新ajax分頁(yè)
這篇文章主要介紹了jquery插件pagination實(shí)現(xiàn)無(wú)刷新ajax分頁(yè)的相關(guān)資料,需要的朋友可以參考下
2015-09-09