摘要：jquery操作復選框。使用更簡潔易懂，思路清晰，邏輯更明了，很實用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
</head>
<body>
<!--給按鈕加個點擊事件-->
<input type="button" value="測試" onclick="test()" />
</body>
<script type="text/javascript">
<!--JS方式加事件-->
function test()
{
alert("aa");
}
</script>
</html>
點測試結果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script><!--引入jquery-1.11.2.min.js要在最上面-->
</head>
<body>
<!--給按鈕加個點擊事件-->
<input type="button" value="測試" onclick="test()" />
<!--給下面的按鈕加事件用jquery-->
<input type="button" value="測試2" id="btn" />
</body>
<script type="text/javascript">
function test()
{
alert("aa");
}
// 只有觸發的時候執行
$(document).ready(function(e) {
//先找元素用$(測試2id)-用click給前面的按鈕加點擊事件-執行(function(){}匿名函數因為沒有名字
$("#btn").click(function(){
alert("第二個按鈕");//點擊之后要執行的函數。匿名函數
})
});
</script>
</html>
Jquery把復選框所選中的值取出來
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<input type="checkbox" class="ck" value="張店" />張店
<input type="checkbox" class="ck" value="淄川" />淄川
<input type="checkbox" class="ck" value="周村" />周村
<input type="checkbox" class="ck" value="臨淄" />臨淄
<input type="checkbox" class="ck" value="博山" />博山
<input type="button" value="取值" id="quck" />
<input type="button" value="賦值" id="fuck" />
</body>
<script type="text/javascript">
//復選框所選中的值取出來
$("#quck").click(function(){
var ck = $(".ck");
for(var i=0;i<ck.length;i++)
{
//第2種寫法用JS方式判斷是不是選中 ck[i].checked
if(ck.eq(i).prop("checked"))
{
alert(ck.eq(i).val());
}
}
})
</script>
</html>
給周村賦值
$("#fuck").click(function(){ var zhi = "周村"; var ck = $(".ck"); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==zhi) { ck.eq(i).prop("checked",true); } } })
第二種方法拼接 給周村賦值
$("#fuck").click(function(){
var zhi = "周村";
$("[value='"+zhi+"']").prop("checked",true);
})
對jquery操作復選框(checkbox)的12個小技巧進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助
1、獲取單個checkbox選中項(三種寫法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 獲取多個checkbox選中項
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3、設置第一個checkbox 為選中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、設置最后一個checkbox為選中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根據索引值設置任意一個checkbox為選中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、選中多個checkbox同時選中第1個和第2個的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根據Value值設置checkbox為選中值
$("input:checkbox[value='1']").attr('checked','true');
8、刪除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、刪除第幾個checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如刪除第3個checkbox:
$("input:checkbox").eq(2).remove();
10、遍歷checkbox
$('input:checkbox').each(function (index, domEle) {
//寫入代碼
});
11、全部選中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12、全部取消選擇
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});