jQuery獲取radio選中項的值實例
639
2024-02-27
首先我們看個簡單的實例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery實現CheckBox全選、全不選</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript">
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
});
</script>
</head>
<body>
<div>
<input id="checkAll" type="checkbox" />全選
<input name="subBox" type="checkbox" />項1
<input name="subBox" type="checkbox" />項2
<input name="subBox" type="checkbox" />項3
<input name="subBox" type="checkbox" />項4
</div>
</body>
</html>
下面再給大家分享一段基于jQuery實現checkbox列表全選、反選和不選功能的代碼，適用于網頁多選后需要進行批量操作的場景（如批量刪除等）。文章結合實例，代碼簡潔，基本覆蓋選項選擇操作的方方面面，希望可以幫到有需要的前端開發愛好者。
引入jquery庫
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
構建HTML
一般從數據庫讀出來的列表都需要批量選中以便刪除與編輯等，下面我們就來模擬下，實現復選框checkbox的全選與不選，先建立html
<ul id="list"> <li><label><input type="checkbox" value="1"> 1.我是記錄來的呢</label></li> <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> <li><label><input type="checkbox" value="3"> 3.愛上你是我的錯嗎？</label></li> <li><label><input type="checkbox" value="4"> 4.從開始你就不應用愛上我</label></li> <li><label><input type="checkbox" value="5"> 5.喜歡一個人好難</label></li> <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" class="btn" id="getValue">
jQuery 代碼
1、全選或全不選。當勾選全選按鈕#selectAll旁邊的復選框#all時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").attr("checked", true);
}else{
$("#list :checkbox").attr("checked", false);
}
});
2、全選。當點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復選框#all時，列表中所有的選項都會被選中，包括全選旁邊的復選框也是選中狀態。
$("#selectAll").click(function () {
$("#list :checkbox,#all").attr("checked", true);
});
3、全不選。當點擊全不選按鈕#unSelect時，列表中所有的選項都是未選中狀態，當然包括#all也是未選中狀態。
$("#unSelect").click(function () {
$("#list :checkbox,#all").attr("checked", false);
});
4、反選。當點擊反選按鈕#reverse，列表中所有被選中的選項變為未選中狀態，而所有未選中的選項變為已選中狀態，當然也要注意#all的狀態。
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
allchk();
});
代碼中遍歷了選項列表，然后改變checked屬性，最后調用函數allchk()，后面將介紹該函數。
5、獲得選中的所有值。我們要跟后臺程序交互就必須獲取列表中所選項的值，我們通過遍歷數組，將選中項的值存放在數組中，最后組成由逗號(,)隔開的字符串，開發者就可以通過獲取這個字符串進行相應的操作了。
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');//轉換為逗號隔開的字符串
alert(vals);
});
為了完善選中選項功能，我們在單擊列表中某個選項時，如果勾選的項剛好滿足全部選中的條件，則#all也要相應的變為選中狀態，同樣，如果事先所有的選項是選中狀態時，當取消勾選某個選項時，那么#all也要相應的變為未選中狀態。
//設置全選復選框
$("#list :checkbox").click(function(){
allchk();
});
函數allchk()就是用來檢測全選框#all應該是選中狀態還是未選中狀態的，請看代碼。
function allchk(){
var chknum = $("#list :checkbox").size();//選項總個數
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).attr("checked")==true){
chk++;
}
});
if(chknum==chk){//全選
$("#all").attr("checked",true);
}else{//不全選
$("#all").attr("checked",false);
}
}
總結
jQuery操作復選框的選中和不選中狀態非常簡單，使用attr()來設置"checked"屬性的值，true未選中，false為未選中，在整個全選、反選過程中注意處理全選復選框的選中狀態，以及獲取選中選項的值。以下我將所有jQuery代碼整理在一起，供大家參考。
$(function () {
//全選或全不選
$("#all").click(function(){
if(this.checked){
$("#list :checkbox").attr("checked", true);
}else{
$("#list :checkbox").attr("checked", false);
}
});
//全選
$("#selectAll").click(function () {
$("#list :checkbox,#all").attr("checked", true);
});
//全不選
$("#unSelect").click(function () {
$("#list :checkbox,#all").attr("checked", false);
});
//反選
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
allchk();
});
//設置全選復選框
$("#list :checkbox").click(function(){
allchk();
});
//獲取選中選項的值
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');
alert(vals);
});
});
function allchk(){
var chknum = $("#list :checkbox").size();//選項總個數
var chk = 0;
$("#list :checkbox").each(function () {
if($(this).attr("checked")==true){
chk++;
}
});
if(chknum==chk){//全選
$("#all").attr("checked",true);
}else{//不全選
$("#all").attr("checked",false);
}
}
