2010-04-15 1 views
5

Non riesco a capire cosa sta succedendo qui. Ho alcune liste annidate di checkbox che vorrei controllare quando il genitore è selezionato. Ancora più importante, non riesco nemmeno a far apparire l'avviso. È come se l'evento click non sparasse. Qualche idea?Jquery: Gestione casella di controllo Fare clic su evento con JQuery

<script type="text/javascript"> 
$(document).ready(function() { 
$("#part_mapper_list input[type=checkbox]").click(function(){ 
    alert("clicked"); 
    if ($(this).attr("checked") == "checked"){ 
     $(this + " input").attr("checked") = "checked"; 
    } else { 
     $(this + " input").attr("checked") = ""; 
    } 
}); 
} 
</script> 
<link rel="stylesheet" href="style.css"> 
<div> 
<ul id="part_mapper_list"> 
<?php 
$makes = array("Audi", "BMW", "Mini", "Porsche", "Volkswagen"); 
$generations = array("Generation 1", "Generation 2", "Generation 3", "Generation 4", "Generation 5"); 
$modelclusters = array("Model Cluster 1", "Model Cluster 2", "Model Cluster 3", "Model Cluster 4", "Model Cluster 5"); 
$cars = array("Car 1", "Car 2", "Car 3", "Car 4", "Car 5"); 

    foreach($makes as $mappermake){ 
     echo "<li id=\"" . $mappermake . "\" class=\"mapper_make\">+<input type=\"checkbox\" name=\"mapper_make\" value=\"" . $mappermake . "\">" . $mappermake . "</input><ul>"; 
     foreach($generations as $mappergen){ 
      echo "<li id=\"" . $mappergen . "\" class=\"mapper_gen\">+<input type=\"checkbox\" name=\"mapper_gen\" value=\"" . $mappergen . "\">" . $mappergen . "</input><ul>"; 
      foreach($modelclusters as $mappermodelcluster){ 
       echo "<li id=\"" . $mappermodelcluster . "\" class=\"mapper_modelcluster\">+<input type=\"checkbox\" name=\"mapper_modelcluster\" value=\"" . $mappermodelcluster . "\">" . $mappermodelcluster . "</input><ul>"; 
       foreach($cars as $mappercar){ 
        echo "<li id=\"" . $mappercar . "\" class=\"mapper_car\"><input type=\"checkbox\" name=\"mapper_car\" value=\"" . $mappercar . "\">" . $mappercar . "</input></li>"; 
       } 
       echo "</ul></li>"; 
      } 
      echo "</ul></li>"; 
     } 
     echo "</ul></li>"; 
    } 
?> 
<input id="submit_mapping" type="submit"> 
</div> 
+0

Si prega di condividere il codice HTML, perché per lo meno si dovrebbe ricevere l'avviso con il codice riportato. –

+0

puoi fornire il markup html aproper? – jAndy

risposta

11

Alla fine del codice di esempio manca una parentesi di chiusura. È un errore di copia e incolla o è il caso nel tuo codice?

$(document).ready(function() { 
    $("#part_mapper_list input[type=checkbox]").click(function(){ 
    alert("clicked"); 
    if ($(this).attr("checked") == "checked"){ 
     $(this + " input").attr("checked") = "checked"; 
    } else { 
     $(this + " input").attr("checked") = ""; 
    } 
    }); 
}); 

Modifica per un commento qui sotto: Io non sono del tutto sicuro se ho capito quello che stai cercando di fare, ma provo questo codice non testato .

$(document).ready(function() { 
    $("#part_mapper_list input[type=checkbox]").click(function() { 
    $("#" + $(this).val() + " input[type=checkbox]").attr("checked", $(this).attr("checked")); 
    }); 
}); 
+1

Ah che ha corretto l'avviso, ma le caselle di controllo annidate non rispondono alla casella di controllo genitore. – wcolbert

+0

Mi piace il tuo modo di pensare! Così semplice, perché non ci ho pensato!?!?! :-D – wcolbert

+1

C'è sempre un modo più semplice per fare qualsiasi cosa! Posso pensare a un modo per semplificare ulteriormente quel codice (suggerimento: $ .find()), ma sono troppo pigro. Inoltre, se hai mai avuto problemi come l'avviso che non viene mostrato, significa che di solito hai perso una parentesi o un altro errore di sintassi minore. Firebug (estensione firefox) e JSLint (sito web di controllo del codice JS) saranno buoni primi stop per errori di sintassi. Buona programmazione! – GlenCrawford

3

Se l'avviso non è sparare ci potrebbe problema con il nostro codice HTML, si prega di verificare che è ben formato e che tu correttamente i tag annidati.

Sarei molto utile se è possibile anche pubblicare il codice HTML, per noi per ispezionare il problema.

$(document).ready(function() { 
    $("#part_mapper_list :checkbox").click(function(){ 
    alert("clicked"); 
    if (this.checked){ 
     //$(this + " input").attr("checked") = "checked"; 
    } else { 
     //$(this + " input").attr("checked") = ""; 
    } 
    }); 
}); 

se il codice è corretto e valido, accedere direttamente propery controllato dell'oggetto rawdom invece di avvolgere con jQuery per minimizzare l'overhead.

+0

grazie. per mio il problema era con 'HTML markup'. – 6339

1

Try This:

$(document).ready(function() { 
    $("#part_mapper_list :checkbox").click(function(){ 
    $(this).find(":checkbox").attr("checked", this.checked); 
    }); 
)}; 
0

provare questo controllo più caselle con jQuery
controllo tutte le caselle di controllo con un solo clic
al clic per casella multipla
selezionare tutti casella di controllo con l'evento onclick
seleziona tutte le caselle di controllo con una sola casella di controllo seleziona

CODICE HTML

<div class="field-type-list-boolean field-name-field-select-all field-widget-options-onoff form-wrapper" id="edit-field-select-all"><div class="form-item form-type-checkbox form-item-field-select-all-und"> 
<input type="checkbox" id="edit-field-select-all-und" name="field_select_all[und]" value="1" class="form-checkbox"> <label class="option" for="edit-field-select-all-und">Select All </label> 

</div> 
</div> 
<div class="field-type-list-boolean field-name-field-select-none field-widget-options-onoff form-wrapper" id="edit-field-select-none"><div class="form-item form-type-checkbox form-item-field-select-none-und"> 
<input type="checkbox" id="edit-field-select-none-und" name="field_select_none[und]" value="1" class="form-checkbox"> <label class="option" for="edit-field-select-none-und">Select None </label> 

</div> 
</div> 

<div id="edit-field-culture-und" class="form-checkboxes"><table class="multicolumncheckboxesradios-table"><tbody><tr class="odd"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column">&nbsp;</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-4"> 
<input type="checkbox" id="edit-field-culture-und-4" name="field_culture[und][4]" value="4" class="form-checkbox"> <label class="option" for="edit-field-culture-und-4">Austria </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-7"> 
<input type="checkbox" id="edit-field-culture-und-7" name="field_culture[und][7]" value="7" class="form-checkbox"> <label class="option" for="edit-field-culture-und-7">Croatia </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-13"> 
<input type="checkbox" id="edit-field-culture-und-13" name="field_culture[und][13]" value="13" class="form-checkbox"> <label class="option" for="edit-field-culture-und-13">Finland (English) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-17"> 
<input type="checkbox" id="edit-field-culture-und-17" name="field_culture[und][17]" value="17" class="form-checkbox"> <label class="option" for="edit-field-culture-und-17">Hungary </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-16"> 
<input type="checkbox" id="edit-field-culture-und-16" name="field_culture[und][16]" value="16" class="form-checkbox"> <label class="option" for="edit-field-culture-und-16">Latvia </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-20"> 
<input type="checkbox" id="edit-field-culture-und-20" name="field_culture[und][20]" value="20" class="form-checkbox"> <label class="option" for="edit-field-culture-und-20">Norway (Norwegian) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-23"> 
<input type="checkbox" id="edit-field-culture-und-23" name="field_culture[und][23]" value="23" class="form-checkbox"> <label class="option" for="edit-field-culture-und-23">Slovakia (English) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last"><div class="form-item form-type-checkbox form-item-field-culture-und-24"> 
<input type="checkbox" id="edit-field-culture-und-24" name="field_culture[und][24]" value="24" class="form-checkbox"> <label class="option" for="edit-field-culture-und-24">Sweden (Swedish) </label> 

</div> 
</td></tr><tr class="even"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column">&nbsp;</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-6"> 
<input type="checkbox" id="edit-field-culture-und-6" name="field_culture[und][6]" value="6" class="form-checkbox"> <label class="option" for="edit-field-culture-und-6">Belgium (Dutch) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-8"> 
<input type="checkbox" id="edit-field-culture-und-8" name="field_culture[und][8]" value="8" class="form-checkbox"> <label class="option" for="edit-field-culture-und-8">Czech Republic </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-14"> 
<input type="checkbox" id="edit-field-culture-und-14" name="field_culture[und][14]" value="14" class="form-checkbox"> <label class="option" for="edit-field-culture-und-14">France </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-3"> 
<input type="checkbox" id="edit-field-culture-und-3" name="field_culture[und][3]" value="3" class="form-checkbox"> <label class="option" for="edit-field-culture-und-3">Ireland </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-18"> 
<input type="checkbox" id="edit-field-culture-und-18" name="field_culture[und][18]" value="18" class="form-checkbox"> <label class="option" for="edit-field-culture-und-18">Malta </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-21"> 
<input type="checkbox" id="edit-field-culture-und-21" name="field_culture[und][21]" value="21" class="form-checkbox"> <label class="option" for="edit-field-culture-und-21">Poland (Polish) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-11"> 
<input type="checkbox" id="edit-field-culture-und-11" name="field_culture[und][11]" value="11" class="form-checkbox"> <label class="option" for="edit-field-culture-und-11">Spain (Catalan) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last"><div class="form-item form-type-checkbox form-item-field-culture-und-25"> 
<input type="checkbox" id="edit-field-culture-und-25" name="field_culture[und][25]" value="25" class="form-checkbox"> <label class="option" for="edit-field-culture-und-25">United Kingdom </label> 

</div> 
</td></tr><tr class="odd"><td class="multicolumncheckboxesradios-column-first multicolumncheckboxesradios-column">&nbsp;</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-5"> 
<input type="checkbox" id="edit-field-culture-und-5" name="field_culture[und][5]" value="5" class="form-checkbox"> <label class="option" for="edit-field-culture-und-5">Belgium (French) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-9"> 
<input type="checkbox" id="edit-field-culture-und-9" name="field_culture[und][9]" value="9" class="form-checkbox"> <label class="option" for="edit-field-culture-und-9">Denmark </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-10"> 
<input type="checkbox" id="edit-field-culture-und-10" name="field_culture[und][10]" value="10" class="form-checkbox"> <label class="option" for="edit-field-culture-und-10">German </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-15"> 
<input type="checkbox" id="edit-field-culture-und-15" name="field_culture[und][15]" value="15" class="form-checkbox"> <label class="option" for="edit-field-culture-und-15">Italy </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-19"> 
<input type="checkbox" id="edit-field-culture-und-19" name="field_culture[und][19]" value="19" class="form-checkbox"> <label class="option" for="edit-field-culture-und-19">Netherlands (Dutch) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-22"> 
<input type="checkbox" id="edit-field-culture-und-22" name="field_culture[und][22]" value="22" class="form-checkbox"> <label class="option" for="edit-field-culture-und-22">Portugal </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column"><div class="form-item form-type-checkbox form-item-field-culture-und-12"> 
<input type="checkbox" id="edit-field-culture-und-12" name="field_culture[und][12]" value="12" class="form-checkbox"> <label class="option" for="edit-field-culture-und-12">Spain (Spanish) </label> 

</div> 
</td><td class="multicolumncheckboxesradios-column multicolumncheckboxesradios-column-last">&nbsp;</td></tr></tbody></table></div> 

POI jQuery CODICE

<script type="text/javascript" src="http://caarcher.biz/ryn/ryn/misc/jquery.js?v=1.4.4"></script> 
<script language="javascript1.1" > 
(function ($){ 

     $(document).ready(function(){ 
        alert("this is text"); 

         $("[id^='edit-field-select']").click(function(){ 
          alert("found anoather one"); 
          if($("#edit-field-select-all-und").is(":checked")) 
           { 

            $("#edit-field-select-none-und").attr("disabled",true); 
            $("#edit-field-select-none-und").attr("checked",false); 
            $("[id^='edit-field-culture-und-']").attr("checked",true); 
            $("[id^='edit-field-culture-und-']").attr("disabled",true); 

           }else if($("#edit-field-select-none-und").is(":checked")) 
           { 
            $("#edit-field-select-all-und").attr("disabled",true); 
            $("[id^='edit-field-culture-und-']").attr("checked",false); 
            $("[id^='edit-field-culture-und-']").attr("disabled",true); 
           } 
           else 
           { 
            $("[id^='edit-field-select']").attr("disabled",false); 
            $("[id^='edit-field-culture-und-']").attr("checked",false); 
            $("[id^='edit-field-culture-und-']").attr("disabled",false); 
           } 
         }); 




      }); 
}) (jQuery); 
</script>