JavaScript: Cómo detectar si una casilla de verificación HTML fue seleccionado?

¿Cómo puedo:

  1. detectar si una casilla de verificación HTML que se ha hecho clic/seleccionado?
  2. recuperar el cual casilla(s) se han seleccionado?

Ejemplo de código:

<FORM ACTION="...">
<INPUT TYPE=CHECKBOX VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="4+">4+ bedrooms<P>
</FORM>

Significado,

  1. si el usuario de la web se selecciona «1 dormitorio», quiero un evento de fuego para informarme que el usuario ha seleccionado «1 dormitorio».
  2. Como se puede ver, un usuario puede seleccionar varias casillas. Por ejemplo, puede ser que desee para ver las casas que tienen «1 dormitorio» o «2 habitaciones». Por lo que sería seleccionada ambas casillas de verificación. ¿Cómo puedo recuperar la casilla de verificación valores cuando varias casillas han sido seleccionados?

En caso de que ayuda, yo estaría dispuesto a usar JQuery para simplificar este.

InformationsquelleAutor HankH | 2009-11-03

9 Kommentare

  1. 12

    jQuery para el rescate! (desde que te etiquetados como tales):

    $('input:checkbox[name=bedrooms]').click(function() {
      var values = $('input:checkbox[name=bedrooms]:checked').map(function() {
        return this.value
      }).get();
    
      //do something with values array
    })

    (asegúrese de añadir un name="bedrooms" atributo en el código html de su casillas de verificación; los necesitará cuando se envía el formulario de todos modos, con el fin de recuperar en el servidor).

    He usado un par de pseudo-selectores:

    Combinarlos como "input:checkbox[name=bedrooms]:checked" y jQuery te da todas las casillas de verificación marcada.

    Para cada uno de ellos me sacar sus valor, el atributo en una matriz puede simplemente repetir y hacer lo que deseas.

    Editar

    Puede optimizar este código para guardar una referencia a las casillas de verificación en lugar de decirle a jQuery para ir a buscar a todos ellos cada vez que hay un clic:

    var $checkboxes = $('input:checkbox[name=bedrooms]');
    $checkboxes.click(function() {
      var values = $checkboxes
        .filter(function() { return this.checked })
        .map(function() { return this.value })
        .get();
    
      //do something with values array
    })

    En este ejemplo he guardado las casillas de verificación en var $checkboxes. Haga clic en cualquier casilla, en lugar de volver a la DOM para agarrar la marcada queridos, simplemente filtro $checkboxes abajo a sólo las casillas que están marcadas, y para cada uno sacar el valor, el atributo en una matriz. El get() es sólo un oscuro requisito para convertir el «jQueryized» matriz regular de un Array de JavaScript.

    • Trampa es que iba a recoger CADA casilla de verificación en su documento. Lo que si tiene más casillas de verificación que sólo para los dormitorios?
    • Oh, la get(0) sólo devuelve el 1er elemento del mapa .. No la raw de la matriz.
    • ha proporcionado un ejemplo de un grupo de casillas de verificación en un formulario. Eso es lo que la respuesta es hecha a la medida. Si «él» había css específica classes, names, o un contenedor, entonces habría sido negligente para excluirlos.
    • en el segundo pensamiento, qué bueno es una casilla de verificación sin name atributo? Respuesta actualizada.
  2. 3

    1) Utilizar el atributo onclick.

    2) Se les podría dar a cada uno el mismo nombre y uso $('input[name=yourname]:checked') para llegar a todos ellos.

    [Editar] a lo solicitado, he aquí un SSCCE.

    <!doctype html>
    <html>
        <head>
            <script src="jquery.js"></script>
            <script>
                $(document).ready(init);
    
                function init() {
                    //Add onclick function to every checkbox with name "bedrooms".
                    $('input[name=bedrooms]').click(showCheckedValues);
                }
    
                function showCheckedValues() {
                    //Gather all values of checked checkboxes with name "bedrooms".
                    var checked = $('input[name=bedrooms]:checked').map(function() {
                        return this.value;
                    }).get();
                    alert(checked);
                }
            </script>
        </head>
        <body>
            <form>
                <input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
                <input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
                <input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
                <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
            </form>
        </body>
    </html>
    • ¿te importaría elaborar algunos mostrando algo de código. Estoy muy emocionado por tu respuesta, pero soy un poco claro exactamente cómo iba a funcionar.
    • No hay problema, se añadió una SSCCE.
    • Divertido, resaltado de sintaxis se volvió loco en la 2ª <script> y no puedo entender la forma en que lo ha causado.
    • ¿qué ocurre si el <input type=»checkbox» name…> se genera dinámicamente. Así que cuando el documento.listo() el fuego, no puede registrar el evento click a la casilla de verificación desde la casilla de verificación no está allí todavía. ¿Cómo podemos resolver este problema?
    • Pham: reemplazar jQueryElement.click(function ...) por jQueryElement.live('click', function ...). API doc: api.jquery.com/live
  3. 1
      <form name="myForm">
        <input type="checkbox" name="myCheck" 
           value="My Check Box"> Check Me
      </form>
    
       <a href="#" onClick="window.alert(document.myForm.myCheck.checked ? 'Yes' : 'No');">Am I Checked?</a>

    Esto es de un libro de texto llamado JavaScript en 10 Pasos Fáciles o Menos por Arman Danesh – así que supongo que esto funciona. espero que ayude

    • document.myForm.myCheck.checked es el bit correspondiente a la pregunta
    • oh. así que pensé que podría ayudar a ver donde pasó todo. lo siento por la confusión
    • no se preocupe, yo sólo pensé que destacar lo que fue la parte más útil de su respuesta! 🙂
  4. 0

    Asignar nombres y/o Identificadores a tu casilla de verificación de los elementos para que pueda distinguirlos en el código. Luego, usando jQuery, añadir eventos con bind si desea controlar el marcar/desmarcar los cambios de estado.

  5. 0

    Uso de Identificadores en su casilla de verificación.

    <FORM ACTION="...">
    <INPUT TYPE=CHECKBOX id="c1" VALUE="1">1 bedroom<BR>
    <INPUT TYPE=CHECKBOX id="c2" VALUE="2">2 bedrooms<BR>
    <INPUT TYPE=CHECKBOX id="c3" VALUE="3">3 bedrooms<BR>
    <INPUT TYPE=CHECKBOX id="c4" VALUE="4+">4+ bedrooms<P>
    </FORM>
    
    
    
    $('c1').checked //returns whether the 1 bedroom checkbox is true or false
    • $(‘c1’).comprueba es una comprobación para ver si ha sido seleccionado. Necesito un Evento de fuego para informarme de que la casilla de verificación está seleccionada. ¿Cómo puedo crear el evento para disparar si la casilla de verificación ha sido seleccionado?
  6. 0

    Puede utilizar el .propiedad checked en una casilla de verificación para recuperar si una casilla ha sido marcada. Para disparar un evento cuando una casilla de verificación está activada, puede utilizar el evento click de jquery. Algo como el siguiente trabajo a la lista de todas las casillas de verificación en la página que hayan sido revisados.

    $("input[type='checkbox']").click(function() {
        //if you want information about the specific checkbox that was clicked        
        alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked);
    
        //if you want to do something with ALL the checkboxes on click. 
        $.each($["input[type='checkbox']", function(i, checkEl) {
           //put any of your code to do something with the checkboxes here.
           alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked);
        });
    });
  7. 0

    Puede utilizar eventos para ver si una casilla de verificación se ha seleccionado (onChange). Usted puede leer más acerca de esto en el Esencial Javascript tutorial (consulte la sección titulada: Javascript es un Evento Impulsado Idioma)

  8. 0

    Marcado:

    ...<input type="checkbox">...
    1. detectar si una casilla de verificación HTML que se ha hecho clic/seleccionado?

    a: uso de jQuery 1.7+:

    $(function(){
        $("input").click(function () {
            console.log($(this)[0].checked);
        });      
    });
    1. recuperar el cual casilla(s) se han seleccionado?

    una: otra vez usando jQuery 1.7+:

    console.log($('input:checked'));

    Espero que esto ayude.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea