使用jquery怎么操作checkbox?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
做系統的過程中,與checkbox 復選框打交道,是難免的,而且在每個系統中,簡直是必不可少的一道菜,通常的操作有一下幾種:
1.用jquery 全部選擇checkbox
2.用jquery 全部取消checkbox
3.用jquery 實現checkbox 反選
4.用jquery 獲取所有已選擇checkbox的值。
現在將這些常用的操作總結在一個例子中,方便以后查詢,不愿意看代碼的,也可以下載源碼運行測試。
<!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是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發網站。
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。