1. 首頁 > 生活百科 > >

教你jquery獲取checkbox選中的值 jq全選反選取消代碼

生活百科

jq全選反選取消代碼，教你jquery獲取checkbox選中的值,金華號帶你了解相關信息 。
使用jq寫選項卡，告別了繁瑣的循環以及命名規范

教你jquery獲取checkbox選中的值 jq全選反選取消代碼

文章插圖
基礎原理：1.當某一個btn被選中時，將這種btn的背景顏色設為橘色，其余朋友btn背景顏色設為空（none）
2.如果子div與btn的索引相同，就將這種div展現而很多的朋友div掩藏
1).css函數參數2的回調函數方法；
2).原生get方法再轉jq對象 再進行設置的方法
3).目前div使用show()方法，其余朋友div使用hide()方法
關鍵字：get() siblings() show() hide() css()html頁：
4個btn,4個div
<div id=”wrap”>
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
css頁：
大盒子目前無樣式，在實際研究中需要指定其寬高；第一個btn背景色為橘黃色；第一個子項div展現，其余朋友div掩藏
#wrap div {
width: 300px;
height: 200px;
border: 1px solid red;
display: none;
}
#wrap div:nth-of-type(1) {
display: block;
/* 第一個子項div展現 */
}
#wrap button:nth-of-type(1) {
background: orange;
/* 第一個btn背景色為橘黃色； */
}
jQuery頁：
1)首先給btn綁定事件
$(“#wrap button”).click(function() {
//當btn被點一下后發生的事件
})
關鍵字： click();2) 當btn被點一下時，設置目前選中btn顏色為橘色，并且將很多的朋友btn背景色為空：
$(this).css(“background”, “orange”).siblings(“button”).css(“background”, “none”)
關鍵字： $(this); css(); siblings()3) 聲明一個變量，這種變量保存了被選中的btn的下標
var $index = $(this).index();
　關鍵字：$index; $(this);index();// 1：尋找全部的子div，并且設置css樣式，如果某個div的索引與btn的索引相同，就讓他展現
$(“#wrap div”).css(“display”, function(i) {
【教你jquery獲取checkbox選中的值 jq全選反選取消代碼】if (i == $index) {
return “block”;
}
return “none”;
})
關鍵字：css() ; “display” ; i == $index;b:通過get()方法將子div的索引與目前btn的索引綁定，之后再將這種索引轉變成jq對象，再使用jq方法將對應div展現
1
$($(“#wrap div”).get($(this).index())).css(“display”, “block”).siblings(“div”).css(“display”, “none”)
由于get方法是js原生方法，所以應將其轉成jq對象才能使用jq方法
關鍵字： $() ; $(this).index; get();css();siblings()c:通過目前btn的索引綁定div的索引，進而將這種索引對應的div展現show(),并將其余的div朋友元素掩藏hide()
$(“#wrap div”).eq($(this).index()).show().siblings(“div”).hide();
關鍵字：eq();$(this).index();show();hide()這樣，就完成了使用jQuery方法實現選項卡 。

    推薦閱讀