I have the following code. I need help fixing it such that the "Category" checkbox for each category should be checked only if all the items under that are checked.
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Collapse")
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Expand");
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']")
.attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length ==
$("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
.attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif"
title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0"
onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<开发者_如何学编程;tr style="display: none;" id="child-0">
<td>Apple</td>
<td><input type="checkbox" value="0" name="chk0[1]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td>Banana</td>
<td><input type="checkbox" checked value="0" name="chk0[2]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id="child-0">
<td>Orange</td>
<td><input type="checkbox" checked value="0" name="chk0[5]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
<td><img class="parent" id="1" src="arrow_collapsed.gif"
title="Click to Expand">Category - Vegetables</td>
<td><input type="checkbox" name="chk1"
onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Cabbage</td>
<td><input type="checkbox" checked value="0" name="chk1[21]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Tomatoes</td>
<td><input type="checkbox" value="0" name="chk1[26]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr style="display: none;" id=child-1>
<td>Green Peppers</td>
<td><input type="checkbox" checked value="0" name="chk1[29]"
onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>
your html is still a mess but here is the solution
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.toggle_subcheckbox').click(function(){
$('.subcheckbox', $(this).parents('div')).toggle();
});
$('.subcheckbox input').change(function(){
$this = $(this);
var checker = true;
$('input', $this.parents('.subcheckbox')).each(function(){
if( ! $(this).is(':checked')){
checker = false
}
else {
$('.maincheckbox', $this.parents('div')).attr('checked', false);
}
});
if(checker){
$('.maincheckbox', $this.parents('div')).attr('checked', true);
}
});
$('.maincheckbox').change(function(){
var state = $(this).is(':checked');
$('.subcheckbox input', $(this).parents('div')).each(function(){
$(this).attr('checked', state);
});
});
});
</script>
<style type="text/css" media="screen">
.subcheckbox {
display: none;
}
</style>
</head>
<body>
<form id="frmDinnerMenu" method="post" action="">
<div>
<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Fruits</label>
<input class="maincheckbox" type="checkbox" name="chk0" />
<div class="subcheckbox">
<div>
<label>Apple</label>
<input type="checkbox" value="0" name="chk0[1]" />
</div>
<div>
<label>Banana</label>
<input type="checkbox" value="0" name="chk0[2]" />
</div>
<div>
<label>Orange</label>
<input type="checkbox" value="0" name="chk0[5]" />
</div>
</div>
</div>
<div>
<label><img class="toggle_subcheckbox" src="arrow_collapsed.gif" /> Category - Vegetables</label>
<input class="maincheckbox" type="checkbox" name="chk0" />
<div class="subcheckbox">
<div>
<label>Cabbage</label>
<input type="checkbox" value="0" name="chk1[21]" />
</div>
<div>
<label>Tomatoes</label>
<input type="checkbox" value="0" name="chk1[26]" />
</div>
<div>
<label>Green Peppers</label>
<input type="checkbox" value="0" name="chk1[29]" />
</div>
</div>
</div>
</form>
</body>
</html>
Add something to your inputs to distinguish them as a member of a group like a class or something ala 'class="chbVegetables"' and then use the :checked selector
$(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0
Inside function toggleParentCheckboxes, try:
if ($("#"+ form +" :checkbox[name='"+ current.name +"']").length == $("#"+ form +" :checkbox[name='"+ current.name +"[]']:checked").length){
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']").attr("checked", true);
}
However, as czarchiac said, it's a little unclear what you're trying to accomplish
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论