Cases à cocher Jquery UI - Cochez la catégorie seulement si toutes les sous-catégories sont vérifiées

J'ai le code suivant. J'ai besoin d'aide pour le fixer de telle sorte que la case à cocher "Catégorie" pour chaque catégorie ne soit vérifiée que si tous les éléments qui s'y trouvent sont vérifiés.Cases à cocher Jquery UI - Cochez la catégorie seulement si toutes les sous-catégories sont vérifiées

<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>

Source

2009-12-14 Jake

Malheureusement vous utilisez des tables et le code est si large, il est difficile de lire. Pouvez-vous modifier la mise en forme ( sur une nouvelle ligne)? Et s'il vous plaît développer ce que vous essayez d'accomplir exactement. – czarchaic

Si les cases à cocher à côté de "Apple", "Orange", "Banane" sont cochées, la case "Catégorie-Fruits" doit être cochée, sinon elle doit être décochée. Même cas avec la case "Catégorie-Légumes" – Jake

Votre besoin n'est pas clair ... qu'est-ce qui ne fonctionne pas? Quel genre de comportement votre code présente-t-il qui ne correspond pas à vos besoins? – r00fus

votre code html est toujours un gâchis mais voici la 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>

Source

2009-12-14 21:00:41 antpaw

+1 Belle. Plus de tables. Plus de gestionnaires en ligne. – czarchaic

Merci! C'est ce que je voulais accomplir .. Je sais que l'utilisation de balises div est la meilleure façon de le faire, mais je voulais le faire avec des tables .. – Jake

Ajouter quelque chose à vos entrées pour les distinguer en tant que membre d'un groupe comme une classe ou quelque chose ala « class = « chbVegetables » », puis utilisez le: sélecteur vérifié

$(:checkbox[name='chk1']).checked=$('.chbVegetables:not(:checked)').length == 0

Source

2009-12-14 20:42:18 RHicke

a l'intérieur toggleParentCheckboxes fonction, essayez:

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); 
}

Cependant, comme czarchiac dit, il est un peu difficile de ce que vous essayez d'accomplir

Source

2009-12-14 20:49:37 munch

Cases à cocher Jquery UI - Cochez la catégorie seulement si toutes les sous-catégories sont vérifiées

Répondre

Questions connexes