Parent-und child-Checkboxen

  <div id="customerServices">
        <input id="s9" type="checkbox" /> Parent element<br/>
            <input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
            <input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
        <br/><br/><br/>

         <input id="s10" type="checkbox" /> Parent element2<br/>
            <input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
            <input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
          <br/><br/><br/>

           <input id="s101" type="checkbox" /> Parent element3<br/>
           <input id="s102" type="checkbox" /> Parent element4<br/>
     </div>

Gibt es einige Checkboxen auf einer Seite. Ich brauche:

  1. Überprüfen Sie alle Kinder-wenn Eltern überprüft wird.
  2. Deaktivieren Sie Elternteils, wenn alle Kinder sind deaktiviert.
  3. Überprüfen Elternteils wenn mindestens ein Kind markiert ist.

Dies ist etwas wenig code, aber es funktioniert nicht

  $('input[type=checkbox]').change(function() {
        var id = $(this).attr('id');
        var children = $('.parent-' + id);


        //Is this a child
        if (children.length)
        {
           //Is it checked
             if ($(this).is(':checked'))
             {
                 //Find the parent
                 var className = $(this).attr('class');
                 var pId = className.replace("parent-","");

                 //If the parent is not checked, then check this parent
                 if (!$(pId).is(':checked'))
                     $(pId).attr('checked','checked');
             }

            //Is it NOT checked
            else{
                //Do other childs are not checked too?
               //var className2 = $(this).attr('class');
                //$(className2)
            }
        }
        //If this is a parent, then check all childs
        esle{ 
            children.attr('checked', $(this).attr('checked'));

        }


     });
InformationsquelleAutor Alexandre | 2011-03-01
  1. 5

    Hier schrieb ich code für Euch: http://jsfiddle.net/PUWZX/4/

    • Es ist perfekt! Danke.
    • Gerne helfen 🙂
    • vielleicht vereinfachen Sie die Funktionen wie Sie dieses snippet:parentClicked: function() { var parentCheck = this.checked; $( '#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').each(function(){this.checked = parentCheck;}); },
    • und untergeordnete Funktion snippet: childClicked: function() { var temp = $(this).attr('class').split('-'); var parentId = temp[1]; $('#'+parentId)[0].checked=$('#customerServices input:checkbox[class="'+$(this).attr('class')+'"]:checked').length!==0;}
    • Beispiel mit meinen änderungen: jsfiddle.net/gfDAh
    InformationsquelleAutor CoolEsh
  2. 0

    Habe ich nicht alle überprüft dein script, aber sagen Sie mir zuerst, wenn Sie diesen code in

    $(document).ready(function() {
....
});

    und wenn jquery funktioniert auf Ihrer Seite?

    InformationsquelleAutor Adam Lukaszczyk
  3. 0

    Versuchen, diese, http://jsfiddle.net/erick/dd6Qr/

    //1. Check all  childs  if  parent is checked
$("#s9").change(function(){
    if($(this).is(':checked')) {
        var cls = '.parent-' + $(this).attr('id');
        $(cls).attr('checked', true);  
    }
});

$('input[class*="parent"]').change(function(){
    var cls = '.' + $(this).attr('class') + ':checked';
    var len = $(cls).length;
    var parent_id = '#' + $(this).attr('class').split('-')[1];

    //3. Check parent if at least one child is checked
    if(len) {
        $(parent_id).attr('checked', true);
    } else {
        //2. Uncheck parent if all childs are unchecked.
        $(parent_id).attr('checked', false);
    }
});
    • Was ist mit #s10, #s101, #s102?
    • sieht loopfähig? vielleicht setzen Sie Sie in einem array und eine Schleife durch.
    InformationsquelleAutor erickb
Schreibe einen Kommentar