jquery 选择取消 checkbox

最新推荐文章于 2022-09-15 08:45:31 发布

原创最新推荐文章于 2022-09-15 08:45:31 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

3 篇文章

订阅专栏

Jquery

3 篇文章

订阅专栏

本文提供了一个使用jQuery操作Checkbox的示例代码，包括查看已选中项、全选、取消全选及反选等功能。通过简单的HTML和JavaScript实现，适用于前端开发人员学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery选择checkbox示例代码，包括四个功能，分别是查看选择的checkbox、全选、取消全选、反选。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery/jquery-1.6.1.min.js" ></script>
<title>JQUERY使用CHECKBOX</title>
</head>
<body>
<form id="editForm" name="editForm" action="" method="post">
<input type="checkbox" name="ckname" value="1"/>1<br />
<input type="checkbox" name="ckname" value="2"/>2<br />
<input type="checkbox" name="ckname" value="3"/>3<br />
<input type="button" value="查看选择的checkbox" onclick="showCheckBox();"/>
<input type="button" value="全选" onclick="checkAllBox();"/>
<input type="button" value="取消全选" onclick="cancelcheckAllBox();"/>
<input type="button" value="反选" onclick="reverseSelectAllBox();"/>
</form>
</body>
</html>
<script type="text/javascript">
/**
* 获取选中的checkbox，并显示选中的值
*/
function showCheckBox() {
$('input[name="ckname"]:checked').each(function(index, element) {
alert("index:" + index + " element:" + element.value);
});
}

/**
* 全选checkbox
*/
function checkAllBox() {
$('input[name="ckname"]').attr("checked", true);
}

/*
* 取消全选
*/
function cancelcheckAllBox() {
$('input[name="ckname"]').attr("checked", false);
}

/*
* 反选
*/
function reverseSelectAllBox() {
$('input[name="ckname"]').each(function(index, element) {
if (element.checked) {
element.checked = false;
//$(this).removeAttr("checked");
} else {
//element.checked = true;
$(this).attr("checked", true);
}
});
}

</script>