checkbox的选中全选返选获取所有选中的值所有的值单选全部时父选中
Posted 魂心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox的选中全选返选获取所有选中的值所有的值单选全部时父选中相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script>
/* 第一种方法
function selectAll() {
if ($("#select-all").is(":checked")) {
$("[name=‘selected‘]").prop("checked", true);
} else {
$("[name=‘selected‘]").prop("checked", false);
}
} */
/*
*
第二种方法
*/
function selectAll() {
if ($("#select-all").is(":checked")) {//判断一个checkbox多选框是否选中
$("input:checkbox[name=‘selected‘]").prop("checked", "checked");
var allValue = queryCheckedValue();
alert(allValue);
} else {
$("input:checkbox[name=‘selected‘]").prop("checked", "");
var str = noCheckedValue();
alert(str);
}
}
//获取所有选中checkbox的值
function queryCheckedValue() {
var str = "";
$("input:checkbox[name=‘selected‘]:checked").each(function(i) {
var val = $(this).val();
str = str + val + "-";
});
return str;
}
//所有的name为‘selected’的checkbox的值
function noCheckedValue() {
var str = "";
$("input:checkbox[name=‘selected‘]").each(function(i) {
var val = $(this).val();
str = str + "-" + val;
});
return str;
}
//判断所有的子checkbox全部选中时，总checkbox选中，否则，反之；
function oneToAll() {
var allChecked = 0;//所有选中checkbox的数量
var all = 0;//所有checkbox的数量
$("input:checkbox[name=‘selected‘]").each(function(i) {
all++;
if ($(this).is(":checked")) {
allChecked++;
}
});
if(allChecked==all){//相等时，则所有的checkbox都选中了，否则，反之；
$("#select-all").prop("checked",true);
}else{
$("#select-all").prop("checked",false);
}
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="select-all"
onclick="selectAll();" /></td>
<td>全选的checkbox</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="1" onclick="oneToAll();"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="2" onclick="oneToAll();"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="3" onclick="oneToAll();"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="4" onclick="oneToAll();"/></td>
<td>4</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="5" onclick="oneToAll();"/></td>
<td>5</td>
</tr>
</table>
</body>
</html>
以上是关于checkbox的选中全选返选获取所有选中的值所有的值单选全部时父选中的主要内容，如果未能解决你的问题，请参考以下文章
js写全选，怎么取消一个checkbox的选中状态，让全选的checkbox选中状态取消