Javascript 选择父复选框
我有一个页面，它有一个树形结构，它没有限制的级别数。每个级别都有一个勾选框，我需要能够让用户勾选他们感兴趣的级别。如果用户单击某个级别，则需要选择该子级的所有父级。此外，如果取消选中父级复选框，则应取消选中所有子级 我试着在下面写代码，哪种代码有效，但是如果我点击孩子，它会勾选父母和祖父母，但不选中孩子。我也无法取消选择项目，因为每次我选择一个框时，它总是再次选择它 我一直在尝试对代码进行修改，并提出了一些想法，但我认为我走错了方向，我想知道是否有更好的解决方案可用于我试图实现的目标。代码如下：Javascript 选择父复选框,javascript,jquery,Javascript,Jquery,我有一个页面，它有一个树形结构，它没有限制的级别数。每个级别都有一个勾选框，我需要能够让用户勾选他们感兴趣的级别。如果用户单击某个级别，则需要选择该子级的所有父级。此外，如果取消选中父级复选框，则应取消选中所有子级 我试着在下面写代码，哪种代码有效，但是如果我点击孩子，它会勾选父母和祖父母，但不选中孩子。我也无法取消选择项目，因为每次我选择一个框时，它总是再次选择它 我一直在尝试对代码进行修改，并提出了一些想法，但我认为我走错了方向，我想知道是否有更好的解决方案可用于我试图实现的目标。代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check Box</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function () {
$(".test").click(function (event) {
event.preventDefault();
});
});
function set_checked(id, checked) {
$("#ID_" + id).attr("checked", checked)
alert(id);
}
function CheckMe(id) {
var IDS = id.replace("ID_", "");
var IDS = IDS.split('_');
for (i = 0; i < IDS.length; i++) {
set_checked(IDS[i], true);
}
}
</script>
</head>
<body>
<div>
<form>
<p>
<input name="ID" type="checkbox" id="ID_123" value="123" onClick="CheckMe('ID_123')" class="test">Grandparent
<br>
<input name="ID" type="checkbox" id="ID_124" value="124" onClick="CheckMe('ID_123_124')"class="test">Parent
<br>
<input name="ID" type="checkbox" id="ID_125" value="125" onClick="CheckMe('ID_123_124_125')"class="test">Child
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>
</div>
</body>
</html>
有一些插件已经提供了这个功能 试试这个，因为它正是你想要的 演示：
有些插件已经提供了此功能 试试这个，因为它正是你想要的 演示：
不确定“级别”是什么意思，复选框是嵌套在其他元素中，还是像您的示例中那样，只是兄弟元素 如果示例HTML正确，请删除所有内联JS，然后执行以下操作：
$(".test").on('change', function() {
var i = $(this).index(),
c = $(this).is(':checked');
$(".test").filter(function() { return $(this).index() < i; }).prop('checked', c);
});
$（“.test”）.on（'change'，function（））{
var i=$（this）.index（），
c=$（this）.is（':checked'）；
$（“.test”）.filter（函数（）{return$（this.index（）不确定“级别”是什么意思，复选框是嵌套在其他元素中，还是像您的示例中那样，只是兄弟元素 如果示例HTML正确，请删除所有内联JS，然后执行以下操作：
$(".test").on('change', function() {
var i = $(this).index(),
c = $(this).is(':checked');
$(".test").filter(function() { return $(this).index() < i; }).prop('checked', c);
});
$（“.test”）.on（'change'，function（））{
var i=$（this）.index（），
c=$（this）.is（':checked'）；
$（“.test”）.filter（函数（）{return$（this.index（）<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check Box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script language="javascript">
$(document).ready(function () {
$(".test").on('click',function () {
var clicked = $(this);
var hermanos = clicked.siblings(".test");
if(clicked.attr("checked")=="checked")
$.each(hermanos, function(index,object){
if($(object).val() < clicked.val())
$(object).attr("checked", "checked");
});
else
$.each(hermanos, function(index,object){
if($(object).val() > clicked.val())
$(object).removeAttr("checked");
});
});
});
</script>
</head>
<body>
<div>
<form>
<p>
<input name="ID" type="checkbox" value="123" class="test">Grandparent
<br>
<input name="ID" type="checkbox" value="124" class="test">Parent
<br>
<input name="ID" type="checkbox" value="125" class="test">Child
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>
</div>
</body>
复选框
$（文档）.ready（函数（）{
$（“.test”）。在（'click'，函数（）{
var clicked=$（这个）；
var hermanos=clicked.sides（“.test”）；
如果（单击.attr（“选中”）=“选中”）
$.each（hermanos，函数（索引，对象）{
if（$（object.val（）单击.val（））
$（对象）.removeAttr（“选中”）；
});
});
});
祖父母
父母亲
小孩
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check Box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script language="javascript">
$(document).ready(function () {
$(".test").on('click',function () {
var clicked = $(this);
var hermanos = clicked.siblings(".test");
if(clicked.attr("checked")=="checked")
$.each(hermanos, function(index,object){
if($(object).val() < clicked.val())
$(object).attr("checked", "checked");
});
else
$.each(hermanos, function(index,object){
if($(object).val() > clicked.val())
$(object).removeAttr("checked");
});
});
});
</script>
</head>
<body>
<div>
<form>
<p>
<input name="ID" type="checkbox" value="123" class="test">Grandparent
<br>
<input name="ID" type="checkbox" value="124" class="test">Parent
<br>
<input name="ID" type="checkbox" value="125" class="test">Child
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form>
</div>
</body>
复选框
$（文档）.ready（函数（）{
$（“.test”）。在（'click'，函数（）{
var clicked=$（这个）；
var hermanos=clicked.sides（“.test”）；
如果（单击.attr（“选中”）=“选中”）
$.each（hermanos，函数（索引，对象）{
if（$（object.val（）单击.val（））
$（对象）.removeAttr（“选中”）；
});
});
});
祖父母
父母亲
小孩
您可能需要考虑嵌套<代码> UL><代码> s来构造复选框层次结构，这将允许更简单的操作和演示。您可以考虑嵌套<代码> UL><代码> s来构造复选框层次结构，这将允许更简单的操作和演示。+ 1 jQuery是很棒的，可以做所有的事情。它也很好。+1 jquery很棒，可以做所有事情。我使用的代码示例具有误导性。树中有许多分支，可能有多个“族”。我使用的代码示例具有误导性。树中有许多分支，可能有多个“家族”。