您的位置：首页 > Web前端 > JQuery

jquery 选择取消 checkbox

2015-09-09 23:34 633 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery 选择 取消 checkbox

jquery 选择取消 checkbox