溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
使用jquery怎么操作checkbox？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
做系統(tǒng)的過程中，與checkbox 復(fù)選框打交道，是難免的，而且在每個(gè)系統(tǒng)中，簡直是必不可少的一道菜，通常的操作有一下幾種：
1.用jquery 全部選擇checkbox
2.用jquery 全部取消checkbox
3.用jquery 實(shí)現(xiàn)checkbox 反選
4.用jquery 獲取所有已選擇checkbox的值。
現(xiàn)在將這些常用的操作總結(jié)在一個(gè)例子中，方便以后查詢,不愿意看代碼的，也可以下載源碼運(yùn)行測試。
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yihaomen.com jquery checkbox 測試</title>
<link rel="stylesheet" type="text/css" href="/static/css/global.css" rel="external nofollow" >
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
/*全選或全不選*/
$("#controlall").click(function() {
$('input[name="selectdivision"]').attr("checked",this.checked);
});
var $subBox = $("input[name='selectdivision']");
$subBox.click(function(){
$("#controlall").attr("checked",$subBox.length == $("input[name='selectdivision']:checked").length ? true : false);
});
/*反選*/
var reverseBtn=$('#reverseselect');
reverseBtn.click(function(){
$("[name='selectdivision']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
});
/*得到所有值*/
var getvalueBtn=$('#getValButton');
getvalueBtn.click(function(){
var val_array=[];
$("input:checkbox[name=selectdivision]:checked").each(function(){
val_array.push(parseInt($(this).val()));
});
alert(val_array.join());
});
});
</script>
</head>
<body>
<div>
<table class="crmgrid_popwindow" id="division_table">
<tr >
<td><input type="checkbox" id="controlall" name="controlall" />全選/全不選</td>
<td>
<input type="button" id="reverseselect" value="反選" />
<input type="button" id="getValButton" value="得到選擇的值" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="1"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="2"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="3"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="4"/></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="5"/></td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="6"/></td>
<td>6</td>
</tr>
</table>
</div>
</body>
</html>jquery是一個(gè)簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼