TShopping
標題:
jQuery獲取checkbox選中項等操作及注意事項
[打印本頁]
作者:
woff
時間:
2014-3-3 01:26
標題:
jQuery獲取checkbox選中項等操作及注意事項
今天在做一個項目功能時需要顯示checkbox選項來讓用戶進行選擇,由於前端不是很熟練,所以做了一個簡單的Demo,其中遇到一些小問題,特記錄下來,希望能幫到遇到類似問題的同學們。
1. 獲取checkbox的選中項
2. checkbox選項的全選 反選操作
用於測試的checkbox代碼段:
<div>
<input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" /><label for="in1">一年級</label>
<input type="checkbox" name="abc" value="二年級" id="in2" /><label for="in2">二年級</label>
<input type="checkbox" name="abc" value="三年級" id="in3" /><label for="in3">三年級</label>
<input type="checkbox" name="abc" value="四年級" id="in4" /><label for="in4">四年級</label>
<input type="checkbox" name="abc" value="五年級" id="in5" /><label for="in5">五年級</label>
<input type="checkbox" name="abc" value="六年級" id="in6" /><label for="in6">六年級</label>
<input type="checkbox" name="abc" value="七年級" id="in7" /><label for="in7">七年級</label>
<input type="checkbox" name="abc" value="八年級" id="in8" /><label for="in8">八年級</label>
</div>
複製代碼
$("input[name='checkbox'][checked]").each(function () {
alert(this.value);
})
複製代碼
但在測試時我就遇到了問題,這種方法在IE下可以獲取,但在firefox和chrome瀏覽器下就無法獲取當前的選中項,測試效果如下:
IE下的測試效果(我的是IE10):
chrome瀏覽器下的效果:
網址: Jquery 選中多少個input CheckBox問題,IE正常,FF和Chrome無法取到值
//獲取選中項
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});
複製代碼
在chrome下的效果:
二:checkbox的全選 反選操作:
由於這兩個比較簡單,我就直接上代碼吧:
//全選/取消全選
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});
//反選
$('#fanxuan').click(function () {
$("input[name='abc']").each(function () {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
});
複製代碼
再總結一下:
jquery版本在1.3之前時,獲取checkbox的選中項的操作:
$("input[name='abc'][checked]").each(function () {
alert(this.value);
});
複製代碼
jquery版本在1.3之後時,獲取checkbox的選中項的操作:
$("input[name='abc']:checked").each(function () {
alert(this.value);
});
複製代碼
附 完整測試Demo代碼:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
//獲取選中項(FF和chrome下無效)
$('#huoqu').click(function () {
//$("input[name='abc'][checked]").each(function () {
// alert(this.value);
//});
$('#show').html("");
$("input[name='abc'][checked]").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});
//獲取選中項
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});
//全選/取消全選
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});
//反選
$('#fanxuan').click(function () {
$("input[name='abc']").each(function () {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" /><label for="in1">一年級</label>
<input type="checkbox" name="abc" value="二年級" id="in2" /><label for="in2">二年級</label>
<input type="checkbox" name="abc" value="三年級" id="in3" /><label for="in3">三年級</label>
<input type="checkbox" name="abc" value="四年級" id="in4" /><label for="in4">四年級</label>
<input type="checkbox" name="abc" value="五年級" id="in5" /><label for="in5">五年級</label>
<input type="checkbox" name="abc" value="六年級" id="in6" /><label for="in6">六年級</label>
<input type="checkbox" name="abc" value="七年級" id="in7" /><label for="in7">七年級</label>
<input type="checkbox" name="abc" value="八年級" id="in8" /><label for="in8">八年級</label>
</div>
<br />
<input type="button" id="huoqu" value="獲取選中項(FF和chrome下無效)" />
<input type="button" id="quanxuan" value="全選/取消全選" />
<input type="button" id="fanxuan" value="反選" />
<input type="button" id="huoqu2" value="獲取選中項" />
<br />
選中項: <div id="show">
</div>
</form>
</body>
</html>
複製代碼
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2