2010-04-15 20 views
5

No puedo entender lo que está sucediendo aquí. Tengo algunas listas anidadas de casillas de verificación que me gustaría verificar cuando el padre está marcado. Más importante aún, ni siquiera puedo obtener la alerta para aparecer. Es como si el evento click no se disparara. ¿Algunas ideas?Jquery: Manejo de casilla de verificación Haga clic en 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

favor comparta su HTML porque al menos debe recibir la alerta con el código que se muestra. –

+0

¿Puedes proporcionar el marcado apropiado de HTML? – jAndy

Respuesta

11

Falta un corchete de cierre) al final de la muestra del código. ¿Es eso un error de copiar y pegar o ese es el caso en tu código?

$(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") = ""; 
    } 
    }); 
}); 

Editar para hacer comentarios a continuación: no estoy del todo seguro si entiendo lo que estás tratando de hacer, pero trata de no probado este código .

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

Ah, que corrigió la alerta, pero las casillas anidadas no responden a la casilla principal. – wcolbert

+0

¡Me gusta tu forma de pensar! ¡Tan simple, por qué no pensé en eso!?!?! :-D – wcolbert

+1

¡Siempre hay una manera más simple de hacer cualquier cosa! Puedo pensar en una forma de simplificar ese código aún más (pista: $ .find()), pero soy demasiado flojo. Además, si alguna vez tiene problemas como que la alerta no se muestra, significa que ha omitido un corchete u otro error de sintaxis menor. Firebug (extensión de Firefox) y JSLint (sitio web de comprobación de código JS) serán buenas primeras paradas para los errores de sintaxis. Feliz codificación! – GlenCrawford

3

Si la alerta no está disparando Podría problema con el formato HTML, por favor verifique que esté bien formado y que las etiquetas que anidarse correctamente.

estaría mucho más útil si se puede, así publicar su código HTML, para nosotros para inspeccionar el 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") = ""; 
    } 
    }); 
}); 

si el marcado son correctos y válido, acceder directamente a los Propery comprobada del objeto rawdom en lugar de envolver con jquery minimizar la sobrecarga.

+0

gracias. para mí, el problema era con 'HTML markup'. – 6339

1

intenta esto:

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

probar esto cheque múltiples casillas de verificación con jQuery
verificación de todas las casillas con un solo click
en hacer clic para una casilla múltiple
seleccionar todo casilla con el evento onclick
seleccionar todas las casillas de verificación con casilla de verificación única seleccionar

CÓDIGO 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> 

ENTONCES JQUERY CÓDIGO

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