jQuery operation checkbox selection (list/table)

Home

Web Front-end

JS Tutorial

jQuery operation checkbox selection (list/table)_jquery

May 16, 2016 pm 05:38 PM

jquery

1. Checkbox list selection

Rendering:

" -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title></title> <script src="Scripts/ jquery-1.7.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { / / Select all$("#btnCheckAll").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", true);

});

// Select none
$("#btnCheckNone").bind("click", function () { 
$("[name = chkItem]:checkbox"). attr("checked", false); 
}); 
// Reverse selection
$("#btnCheckReverse").bind("click", function () { 
$("[name = chkItem]:checkbox").each(function () { 
$(this).attr("checked", !$(this).attr("checked")); 
}); 
}); 
// Select none
$("#btnSubmit").bind("click", function () { 
var result = new Array(); 
$(" [name = chkItem]:checkbox").each(function () { 
if ($(this).is(":checked")) { 
result.push($(this).attr(" value")); 
} 
}); 
alert(result.join(",")); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<input name="chkItem" type="checkbox" value="Today's topic" />Today's topic
<input name="chkItem" type="checkbox" value="Visual Focus" />Visual Focus
<input name="chkItem" type="checkbox" value="Finance" /> Finance
<input name="chkItem" type="checkbox" value="Car" />Car
<input name="chkItem" type="checkbox" value="Technology" /> Technology
<input name="chkItem" type="checkbox" value="Real Estate" />Real Estate
<input name="chkItem" type="checkbox" value="Travel" /> Travel
</div> 
<div> 
<input id="btnCheckAll" type="button" value="Select All" /> 
<input id=" btnCheckNone" type="button" value="Select none" /> 
<input id="btnCheckReverse" type="button" value="Reverse selection" /> 
<input id=" btnSubmit" type="button" value="Submit" /> 
</div> 
</body> 
</html> 



2. Checkbox table selects 



Rendering: 



Code:

Copy code The code is as follows:

 
<!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></title> 
<style type="text/css"> 
table 
{ 
border-collapse: collapse; 
} 
td 
{ 
border: 1px solid #ccc; 
} 
</style> 
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
// chkAll全选事件 
$("#chkAll").bind("click", function () { 
$("[name = chkItem]:checkbox").attr("checked", this.checked); 
}); 
// chkItem事件 
$("[name = chkItem]:checkbox").bind("click", function () { 
var $chk = $("[name = chkItem]:checkbox"); 
$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length); 
}) 
}); 
</script> 
</head> 
<body> 
<table id="tb"> 
<thead> 
<tr> 
<td> 
<input id="chkAll" type="checkbox" /> 
</td> 
<td> 
分类名称 
</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="今日话题" /> 
</td> 
<td> 
今日话题 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="视觉焦点" /> 
</td> 
<td> 
视觉焦点 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="财经" /> 
</td> 
<td> 
财经 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="汽车" /> 
</td> 
<td> 
汽车 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="科技" /> 
</td> 
<td> 
科技 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="房产" /> 
</td> 
<td> 
房产 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="旅游" /> 
</td> 
<td> 
旅游 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn