jquery操作checkbox

来源：互联网发布：外汇实时行情软件编辑：程序博客网时间：2024/05/16 19:07

1、checkbox list选择

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

$(function () {

// 全选

$("#btnCheckAll").bind("click", function () {

$("[name = chkItem]:checkbox").attr("checked", true);

});

// 全不选

$("#btnCheckNone").bind("click", function () {

$("[name = chkItem]:checkbox").attr("checked", false);

});

// 反选

$("#btnCheckReverse").bind("click", function () {

$("[name = chkItem]:checkbox").each(function () {

$(this).attr("checked", !$(this).attr("checked"));

});

// 全不选

$("#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="今日话题" />今日话题

<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

<input name="chkItem" type="checkbox" value="财经" />财经

<input name="chkItem" type="checkbox" value="汽车" />汽车

<input name="chkItem" type="checkbox" value="科技" />科技

<input name="chkItem" type="checkbox" value="房产" />房产

<input name="chkItem" type="checkbox" value="旅游" />旅游

</div>

<div>

</div>

</body>

</html>

2、checkbox table选中

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

table

{

border-collapse: collapse;

}

{

border: 1px solid #ccc;

}

</style>

$(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>

<thead>

<tr>

<td>

</td>

<td>

分类名称

</td>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

<td>

今日话题

</td>

</tr>

<tr>

<td>

</td>

<td>

视觉焦点

</td>

</tr>

<tr>

<td>

</td>

<td>

财经

</td>

</tr>

<tr>

<td>

</td>

<td>

汽车

</td>

</tr>

<tr>

<td>

</td>

<td>

科技

</td>

</tr>

<tr>

<td>

</td>

<td>

房产

</td>

</tr>

<tr>

<td>

</td>

<td>

旅游

</td>

</tr>

</tbody>

</table>

</body>

</html>