POSTAR casillas de verificación HTML sin marcar

303

Tengo un montón de casillas de verificación que están marcadas por defecto. Mis usuarios probablemente desmarquen algunas (si las hay) de las casillas de verificación y dejarán el resto marcado.

¿Hay alguna forma de hacer que el formulario PUBLICAR las casillas de verificación que no están marcadas, en lugar de las que están marcadas?

reach4thelasers
fuente

Respuestas:

217

Agregue una entrada oculta para la casilla de verificación con una ID diferente:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

Antes de enviar el formulario, deshabilite la entrada oculta en función de la condición marcada:

if(document.getElementById("testName").checked) {
    document.getElementById('testNameHidden').disabled = true;
}
vishnu
fuente
58
Si va con una solución basada en el marcado como esta, probablemente sea mejor poner primero la entrada oculta, por muchas otras respuestas. Si está utilizando PHP, puede eliminar la dependencia de JavaScript, porque solo se utiliza el último valor.
Ben
12
gamov, está equivocado, las etiquetas están unidas a las entradas en función del atributo de identificación, no del atributo de nombre de entrada
Justin Emery
14
Difícil de creer, los autores lo diseñaron de esta manera. ¿Por qué no enviar todos los campos de entrada con algún valor predeterminado para los que no están marcados :( Sería una solución mucho más clara que tener que implementar algunos campos ocultos "piratear". Debe haber quedado claro que será necesario y que tuvieron que ver eso por adelantado.
Srneczek
34
Esto se siente tan chiflado.
EralpB
65
¿Soy el único que piensa que el diseño subyacente del checkboxelemento es terrible? Son un control binario, deberían enviar valores binarios.
alexw
474

La solución que más me gustó hasta ahora es poner una entrada oculta con el mismo nombre que la casilla de verificación que podría no estar marcada. Creo que funciona de modo que si la casilla de verificación no está marcada, la entrada oculta todavía tiene éxito y se envía al servidor, pero si la casilla de verificación está marcada, anulará la entrada oculta antes. De esta manera, no tiene que hacer un seguimiento de qué valores de los datos publicados se espera que provengan de casillas de verificación.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>
Sam
fuente
3
Ahora que releí la pregunta, parece que esto no era realmente lo que querías. Sin embargo, llegué a esta pregunta cuando estaba tratando de resolver esta respuesta, por lo que tal vez podría ser útil para otra persona.
Sam
2
.NET es diferente, consulte stackoverflow.com/questions/7600817/…
KCD
121
Cabe señalar que si marca la casilla, el navegador enviará los valores ocultos y de casilla de verificación. Esta solución se basa en el manejo del servidor de la variable de publicación con estos 2 valores. Si solo toma el último valor (por ejemplo, PHP), su código funcionará como se esperaba. Sin embargo, algunos servidores manejan esto de manera diferente, algunos eligen el primer valor, mientras que otros colocan ambos valores en una lista / matriz.
Michael Ekoka
1
Esta respuesta se basa en el supuesto de que puede transmitir solo una de las dos entradas con el mismo nombre que se enviarán al servidor. No entiendo por qué ha recibido tantos votos positivos.
Muleskinner
77
@sam, ¿no sabes de dónde sacaste esa idea? Cuando dos o más controles tienen el mismo nombre, ambos se enviarán al servidor en el envío (sin embargo, para las casillas de verificación, solo si están marcados); la forma en que se manejan en el servidor depende de la implementación del lado del servidor. Si no me cree, puede verlo usted mismo monitoreando el tráfico utilizando una herramienta como Fiddler.
Muleskinner
75

Lo resolví usando JavaScript de vainilla:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

¡Tenga cuidado de no tener espacios o saltos de línea entre estos dos elementos de entrada!

Puede usar this.previousSibling.previousSiblingpara obtener elementos "superiores".

Con PHP, puede verificar el campo oculto nombrado para 0 (no establecido) o 1 (conjunto).

Marcel Ennix
fuente
¿Por qué no puedes tener espacios o saltos de línea entre los dos elementos?
Michael Potter
@MichaelPotter: this.previousSibling obtendrá espacios en blanco como hermanos, por lo que no funciona.
Marcel Ennix 01 de
44
Oh esto es perfecto! Resuelve el problema de publicar múltiples conjuntos de campos con campos con nombre duplicado allí. Ninguna de las otras soluciones lo hacen. Usando el método de Marcel, sus campos publicados tendrán matrices de igual longitud. Entonces este escenario: <fieldset name='fs1'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset> <fieldset name='fs2'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset>* Suponga que hay nuevas líneas allí. No parecen estar trabajando en bloques de código de mini-marcado
Brian Layman
1
Esta debería ser la respuesta aceptada. Funciona con matrices (ex / name = "soup []")
jdavid05
2
Puedes usar en previousElementSiblinglugar de previousSibling. Es compatible en casi todas partes e ignora los nodos de texto.
MarSoft
23

Mi favorito personal es agregar un campo oculto con el mismo nombre que se usará si la casilla de verificación no está marcada. Pero la solución no es tan fácil como parece.

Si agrega este código:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Al navegador realmente no le importará lo que hagas aquí. El navegador enviará ambos parámetros al servidor, y el servidor debe decidir qué hacer con ellos.

PHP, por ejemplo, toma el último valor como el que se debe usar (consulte: Posición autorizada de claves de consulta HTTP GET duplicadas )

Pero otros sistemas con los que trabajé (basados ​​en Java) lo hacen al revés: le ofrecen solo el primer valor. .NET en su lugar le dará una matriz con ambos elementos

Intentaré probar esto con node.js, Python y Perl en algún momento.

SimonSimCity
fuente
2
ruby y node.js tomarán el último valor de cualquier campo de formulario duplicado. Los métodos de ayuda de Ruby on Rails construyen casillas de verificación de esta manera por este motivo.
nzifnab
77
Solo para redondearlo, esto se basa en un ataque llamado Contaminación de parámetros HTTP y ha sido analizado por OWASP: owasp.org/images/b/ba/AppsecEU09_CarettoniDiPaola_v0.8.pdf (página 9) donde puede encontrar una lista de 20 sistemas y ver cómo manejan eso.
SimonSimCity
1
Java Servlets te da todo, siempre que llamesrequest.getParameterValues
mauhiz
20

Una técnica común en torno a esto es llevar una variable oculta junto con cada casilla de verificación.

<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>

En el lado del servidor, primero detectamos la lista de variables ocultas y para cada una de las variables ocultas, tratamos de ver si la entrada de la casilla de verificación correspondiente se envía en los datos del formulario o no.

El algoritmo del lado del servidor probablemente se vería así:

for input in form data such that input.name endswith .hidden
  checkboxName = input.name.rstrip('.hidden')
  if chceckbName is not in form, user has unchecked this checkbox

Lo anterior no responde exactamente la pregunta, pero proporciona un medio alternativo para lograr una funcionalidad similar.

Shailesh Kumar
fuente
20

no necesita crear un campo oculto para todas las casillas de verificación, simplemente copie mi código. que va a cambiar el valor de la casilla de verificación si no se controla la valueasignará 0y si casilla marcada, asignar valuea1

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})
Rameez SOOMRO
fuente
1
Esta solución funciona bien y es más elegante que contaminar Dom con campos ocultos.
Prasad Paranjape
99
Esto hace que la casilla se verifique temporalmente mientras se envía el formulario. Esto es confuso (en el mejor de los casos) para el usuario.
Mark Fraser
12
$('input[type=checkbox]').on("change",function(){
    var target = $(this).parent().find('input[type=hidden]').val();
    if(target == 0)
    {
        target = 1;
    }
    else
    {
        target = 0;
    }
    $(this).parent().find('input[type=hidden]').val(target);
});

<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>

Si deja de lado el nombre de la casilla de verificación, no se pasa. Solo la matriz test_checkbox.

Jeremy
fuente
1
Muy buena solución, pero en mi caso el live () no funciona, así que usé el método (): $ ('input [type = checkbox]'). On ("change", function () {...}) ;
Massa
44
LIVE es obsoleto. No lo use más en las respuestas en el stackoverflow. Amem
Ismael
Esta respuesta es realmente la mejor ... Funciona como se esperaba. Incluso para la casilla de verificación grupal.
Alemoh Rapheal Baja
11

Puede hacer algunos Javascript en el evento de envío del formulario. Sin embargo, eso es todo lo que puede hacer, no hay forma de que los navegadores lo hagan solos. También significa que su formulario se romperá para los usuarios sin Javascript. Lo mejor es saber en el servidor qué casillas de verificación hay, de modo que pueda deducir que aquellos ausentes de los valores de formulario publicados ( $_POSTen PHP) no están marcados.

Bart van Heukelom
fuente
2
desde php 4.1 también puede usar $ _REQUEST php.net/manual/en/reserved.variables.request.php
Karl Adler el
$_REQUESTes una buena práctica ya que permite la reutilización de algunos códigos si su script admite ambos métodos.
nulabilidad
9

Realmente haría lo siguiente.

Tener mi campo de entrada oculto con el mismo nombre con la entrada de casilla de verificación

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

y luego, cuando publico, primero elimino los valores duplicados recogidos en la matriz $ _POST, que muestran cada uno de los valores únicos.

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

Obtuve esto de una publicación eliminar valores duplicados de la matriz

desw
fuente
¿Cuál es el propósito de [] en el valor del campo de nombre?
Michael Potter
@MichaelPotter Es así que cuando se envía una publicación a PHP, leerá el nombre `checkbox_name []
Twister1002
@ Twister1002, creo que describió el propósito del atributo de nombre, no el propósito de agregar [] en el nombre. Hice una búsqueda en la web y parece que algunas personas lo hacen con los nombres: groupname [elementname] para agrupar los campos, pero no encontré una explicación para vacío [].
Michael Potter
1
@MichaelPotter Lo siento, pensé que había terminado esa declaración. Pero aparentemente no. Déjame rehacer eso. Cuando se envía a php, el procesador PHP lo leerá como una matriz. Entonces, con cada nombre, checkbox_name[]cada valor se ingresará en una matriz, que luego puede extraer. Ej: $_POST['checkbox_name'][0]y así sucesivamente con el incremento de cuántos campos tenían ese mismo nombre. Otro ejemplo es que si tuviera tres campos nombrados field_name[], puede obtener el segundo valor de field_namelike $_POST['field_name'][1]. Su propósito puede ser sorprendente si tiene varios campos que tienen el mismo nombre.
Twister1002
8

"He seguido el enfoque del servidor. Parece que funciona bien, gracias. Llegar a the4thelasers el 1 de diciembre de 2009 a las 15:19". Como se cita: la solución de JavaScript depende de cómo el controlador del servidor (no lo comprobé)

como

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";
N Zhang
fuente
8

Sé que esta pregunta tiene 3 años, pero encontré una solución que creo que funciona bastante bien.

Puede verificar si la variable $ _POST está asignada y guardarla en una variable.

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

la función isset () verifica si la variable $ _POST está asignada. Por lógica, si no está asignado, la casilla de verificación no está marcada.

Riley Stadel
fuente
Esto es mucho mejor, ya que la respuesta más popular es una solución terrible para los lectores de pantalla.
Kevin Waterson
7

La mayoría de las respuestas aquí requieren el uso de JavaScript o controles de entrada duplicados. A veces esto debe manejarse completamente en el lado del servidor.

Creo que la clave (prevista) para resolver este problema común es el control de entrada de envío del formulario.

Para interpretar y manejar con éxito los valores no marcados para las casillas de verificación, debe tener conocimiento de lo siguiente:

  1. Los nombres de las casillas de verificación
  2. El nombre del elemento de entrada de envío del formulario

Al verificar si se envió el formulario (se asigna un valor al elemento de entrada de envío), se puede suponer cualquier casilla de verificación sin marcar .

Por ejemplo:

<form name="form" method="post">
  <input name="value1" type="checkbox" value="1">Checkbox One<br/>
  <input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
  <input name="value3" type="checkbox" value="1">Checkbox Three<br/>
  <input name="submit" type="submit" value="Submit">
</form>

Cuando se usa PHP, es bastante trivial detectar qué casillas de verificación están marcadas.

<?php

$checkboxNames = array('value1', 'value2', 'value3');

// Persisted (previous) checkbox state may be loaded 
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array(); 

// Only process if the form was actually submitted.
// This provides an opportunity to update the user's 
// session data, or to persist the new state of the data.

if (!empty($_POST['submit'])) {
    foreach ($checkboxNames as $checkboxName) {
        if (!empty($_POST[$checkboxName])) {
            $checkboxesThatAreChecked[] = $checkboxName;
        }
    }
    // The new state of the checkboxes can be persisted 
    // in session or database by inspecting the values 
    // in $checkboxesThatAreChecked.
    print_r($checkboxesThatAreChecked);
}

?>

Los datos iniciales se pueden cargar en cada carga de página, pero solo se deben modificar si se envió el formulario. Dado que los nombres de las casillas de verificación se conocen de antemano, se pueden recorrer e inspeccionar individualmente, de modo que la ausencia de sus valores individuales indica que no están marcados.

Werner
fuente
6

He probado la versión de Sam primero. Buena idea, pero hace que haya múltiples elementos en el formulario con el mismo nombre. Si usa cualquier javascript que encuentre elementos basados ​​en el nombre, ahora devolverá una matriz de elementos.

He resuelto la idea de Shailesh en PHP, funciona para mí. Aquí está mi código:

/ * Eliminar los campos '.hidden' si el original está presente, use el valor '.hidden' si no lo está. * /
foreach ($ _POST ['frmmain'] como $ field_name => $ value)
{
    // Solo mira los elementos que terminan en '.hidden'
    if (! substr ($ field_name, -strlen ('. hidden'))) {
        descanso;
    }

    // obtener el nombre sin '.hidden'
    $ real_name = substr ($ key, strlen ($ field_name) - strlen ('. hidden'));

    // Cree un campo original 'falso' con el valor en '.hidden' si no existe un original
    if (! array_key_exists ($ real_name, $ POST_copy)) {
        $ _POST [$ real_name] = $ valor;
    }

    // Eliminar el elemento '.hidden'
    unset ($ _ POST [$ field_name]);
}
Wouter
fuente
6

También me gusta la solución de que simplemente publique un campo de entrada adicional, usar JavaScript me parece un poco extraño.

Dependiendo de lo que use para su backend dependerá de qué entrada vaya primero.

Para un servidor backend donde se usa la primera aparición (JSP), debe hacer lo siguiente.

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>


Para un servidor backend donde se usa la última aparición (PHP, Rails), debe hacer lo siguiente.

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>


Para un servidor back-end donde todas las ocurrencias se almacenan en un tipo de datos de lista ( [], array). (Python / Zope)

Puede publicar en el orden que desee, solo tiene que intentar obtener el valor de la entrada con el checkboxatributo type. Entonces, el primer índice de la lista si la casilla de verificación estaba antes del elemento oculto y el último índice si la casilla de verificación estaba después del elemento oculto.


Para un servidor back-end donde todas las ocurrencias se concatenan con una coma (ASP.NET / IIS) Necesitará (dividir / explotar) la cadena usando una coma como delimitador para crear un tipo de datos de lista. ( [])

Ahora puede intentar tomar el primer índice de la lista si la casilla de verificación estaba antes del elemento oculto y tomar el último índice si la casilla de verificación estaba después del elemento oculto.

Manejo de parámetros del backend

fuente de imagen

TarranJones
fuente
6

Utilizo este bloque de jQuery, que agregará una entrada oculta en el momento del envío a cada casilla de verificación sin marcar. Le garantizará que siempre obtenga un valor enviado para cada casilla de verificación, cada vez, sin saturar su marcado y arriesgarse a olvidar hacerlo en una casilla de verificación que agregue más adelante. También es independiente de cualquier pila de backend (PHP, Ruby, etc.) que esté utilizando.

// Add an event listener on #form's submit action...
$("#form").submit(
    function() {

        // For each unchecked checkbox on the form...
        $(this).find($("input:checkbox:not(:checked)")).each(

            // Create a hidden field with the same name as the checkbox and a value of 0
            // You could just as easily use "off", "false", or whatever you want to get
            // when the checkbox is empty.
            function(index) {
                var input = $('<input />');
                input.attr('type', 'hidden');
                input.attr('name', $(this).attr("name")); // Same name as the checkbox
                input.attr('value', "0"); // or 'off', 'false', 'no', whatever

                // append it to the form the checkbox is in just as it's being submitted
                var form = $(this)[0].form;
                $(form).append(input);

            }   // end function inside each()
        );      // end each() argument list

        return true;    // Don't abort the form submit

    }   // end function inside submit()
);      // end submit() argument list
Matt Holden
fuente
5

También puede interceptar el evento form.submit y la verificación inversa antes de enviar

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});
Jimchao
fuente
4

Veo que esta pregunta es antigua y tiene muchas respuestas, pero de todos modos daré mi centavo. Mi voto es por la solución de JavaScript en el evento 'submit' del formulario, como algunos han señalado. Sin duplicar las entradas (especialmente si tiene nombres largos y atributos con código php mezclado con html), sin molestias en el lado del servidor (eso requeriría conocer todos los nombres de campo y verificarlos uno por uno), solo busque todos los elementos no verificados , asígneles un valor 0 (o lo que sea necesario para indicar un estado 'no verificado') y luego cambie su atributo 'verificado' a verdadero

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

de esta manera tendrá una matriz $ _POST como esta:

Array
(
            [field1] => 1
            [field2] => 0
)
MarcoSpada
fuente
No trabajando a mi lado. Intentando hacer esto pero aún no publica todas las casillas de verificación. [código] $ ("# entrada de filtro"). cambio (función (e) {console.log ('sublmit'); var b = $ ("entrada: casilla de verificación: no (: marcado)"); $ (b) .each (function () {$ (this) .val (2); $ (this) .attr ("marcado", verdadero);}); $ ("# filter"). submit ();}); [/ code]
lio
Hizo el truco para mí. El único inconveniente: al enviar el formulario, todas las casillas de verificación se marcaron. Esto puede ser confuso para un usuario, pero debido a que la página se está recargando después de enviar el formulario, creo que es un problema menor.
Oksana Romaniv
Como dijo Oksana, marca todas las casillas de verificación, incluidas las casillas de verificación requeridas que el usuario no seleccionó para permitir que se envíe el formulario sin que el usuario acepte alguna condición.
bskool
4
$('form').submit(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','1');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
            checkbox.prop('disabled', true);
        }
    })
});
Sajjad Shirazy
fuente
1
Esto funcionó para mí. En lugar de usar .submit, usarías .click. Luego, elimine el bit que deshabilita las casillas de verificación. Después de eso funciona perfectamente.
cgrouge
1
La mejor respuesta no es necesario agregar otra entrada oculta para cada uno
Sky
3

Lo que hice fue un poco diferente. Primero cambié los valores de todas las casillas de verificación sin marcar. A "0", luego los seleccionó todos, por lo que se enviaría el valor.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}

Seborreia
fuente
La respuesta es buena, pero quiero saber si es diferente de la respuesta de @Rameez SOOMRO.
Imran Qamer
Resultado final similar, solo de esta manera no cambia el valor de las casillas marcadas.
Seborreia
2

Preferiría cotejar el $ _POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

Le importa, si el POST no tiene el valor 'checkboxname', fue desmarcado, así que asigne un valor.

puede crear una matriz de sus valores de ckeckbox y crear una función que verifique si existen valores, si no existe, le importa que no estén marcados y puede asignar un valor

Felipe Gonzalez
fuente
1

El ejemplo de las acciones de Ajax es (': marcado') usado jQuery en lugar de .val ();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

los parámetros obtendrán valor en VERDADERO O FALSO.

Mehmet Ali Uysal
fuente
1

Las casillas de verificación generalmente representan datos binarios que se almacenan en la base de datos como valores Sí / No, S / N o 1/0. ¡Las casillas de verificación HTML tienen mala naturaleza para enviar valor al servidor solo si la casilla está marcada! Eso significa que el script del servidor en otro sitio debe saber de antemano cuáles son todas las casillas de verificación posibles en la página web para poder almacenar valores positivos (marcados) o negativos (no marcados). En realidad, solo los valores negativos son un problema (cuando el usuario desmarca el valor previamente verificado), ¿cómo puede saber esto el servidor cuando no se envía nada si no sabe de antemano que se debe enviar este nombre? Si tiene un script del lado del servidor que crea dinámicamente un script de ACTUALIZACIÓN, hay un problema porque no sabe qué todas las casillas de verificación se deben recibir para establecer el valor Y para los marcados y el valor N para los no verificados (no recibidos).

Como almaceno los valores 'Y' y 'N' en mi base de datos y los represento a través de casillas de verificación marcadas y no marcadas en la página, agregué un campo oculto para cada valor (casilla de verificación) con los valores 'Y' y 'N' y luego uso casillas de verificación solo para uso visual representación, y use la función simple JavaScript check () para establecer el valor de if según la selección.

<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>

utilizar un oyente de JavaScript onclick y verificar la función de llamada () para cada casilla de verificación en mi página web

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

De esta manera, los valores 'Y' o 'N' siempre se envían al script del lado del servidor, sabe cuáles son los campos que deben actualizarse y no hay necesidad de convertir el valor "on" de checbox en 'Y' o la casilla de verificación no recibida en 'N '.

NOTA: el espacio en blanco o la nueva línea también es un hermano, así que aquí necesito .previousSibling.previousSibling.value. Si no hay espacio entre ellos, entonces solo .previousSibling.value


No necesita agregar explícitamente el escucha de clics como antes, puede usar la biblioteca jQuery para agregar dinámicamente el escucha de clics con la función de cambiar el valor de todas las casillas de verificación en su página:

$('input[type=checkbox]').click(function()
{
  if(this.checked)
  {
    $(this).prev().val('Y');
  }
  else
  {
    $(this).prev().val('N');
  }
});
sbrbot
fuente
1

Todas las respuestas son geniales, pero si tiene varias casillas de verificación en un formulario con el mismo nombre y desea publicar el estado de cada casilla de verificación. Luego resolví este problema colocando un campo oculto con la casilla de verificación (nombre relacionado con lo que quiero).

<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />

luego controle el estado de cambio de la casilla de verificación con el siguiente código jquery:

$(documen).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 1 : 0;
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

ahora al cambiar cualquier casilla de verificación, cambiará el valor del campo oculto relacionado. Y en el servidor solo puede buscar campos ocultos en lugar de casillas de verificación.

Espero que esto ayude a alguien a tener este tipo de problema. alegría :)

Imran Khan
fuente
1

El problema con las casillas de verificación es que si no están marcadas, no se publican con su formulario. Si marca una casilla de verificación y publica un formulario, obtendrá el valor de la casilla de verificación en la variable $ _POST que puede usar para procesar un formulario; si no está marcada, no se agregará ningún valor a la variable $ _POST.

En PHP, normalmente solucionaría este problema haciendo una verificación isset () en su elemento de casilla de verificación. Si el elemento que espera no está configurado en la variable $ _POST, entonces sabemos que la casilla de verificación no está marcada y el valor puede ser falso.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

Pero si ha creado un formulario dinámico, no siempre sabrá el atributo de nombre de sus casillas de verificación, si no conoce el nombre de la casilla de verificación, entonces no puede usar la función isset para verificar si se ha enviado con la variable $ _POST.

Daniel Galecki
fuente
1
function SubmitCheckBox(obj) {
     obj.value   = obj.checked ? "on" : "off";
     obj.checked = true;
     return obj.form.submit();
}

<input type=checkbox name="foo" onChange="return SubmitCheckBox(this);">
ledav.net
fuente
0

Hay una mejor solución. En primer lugar, proporcione el atributo de nombre solo a las casillas de verificación que estén marcadas. Luego, al hacer clic submit, a través de un JavaScript function, marca todas las casillas sin marcar. Entonces, cuando submitsolo esos serán recuperados en form collectionaquellos que tienen namepropiedad.

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

Ventaja: no es necesario crear cuadros ocultos adicionales y manipularlos.

Gyanesh Gouraw
fuente
0

@cpburnz lo hizo bien, pero con mucho código, aquí está la misma idea usando menos código:

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML (tenga en cuenta el nombre del campo con un nombre de matriz):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

Y para PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>
Rodrigo Polo
fuente
0

Versión jQuery de la respuesta de @ vishnu.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

Si está utilizando jQuery 1.5 o inferior, utilice la función .attr () en lugar de .prop ()

0x1ad2
fuente
0

Esta solución está inspirada en la de @ desw.

Si sus nombres de entrada están en "estilo de formulario", perderá la asociación del índice de matriz con sus valores de chekbox tan pronto como se marque un chekbox, incrementando esta "disociación" en una unidad cada vez que se marque un chekbox. Este puede ser el caso de un formulario para insertar algo como empleados compuestos por algunos campos, por ejemplo:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

En caso de que inserte tres empleados a la vez y el primero y el segundo sean solteros, terminará con una isSinglematriz de 5 elementos , por lo que no podrá iterar a la vez a través de las tres matrices para, por ejemplo, , inserte empleados en una base de datos.

Puede superar esto con un sencillo procesamiento posterior de la matriz. Estoy usando PHP en el lado del servidor e hice esto:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);
Pere
fuente
0

Entonces, esta solución es excesiva para esta pregunta, pero me ayudó cuando tuve la misma casilla de verificación que ocurrió muchas veces para diferentes filas en una tabla. Necesitaba saber la fila que representaba la casilla de verificación y también conocer el estado de la casilla de verificación (marcada / desmarcada).

Lo que hice fue quitar el atributo de nombre de mis entradas de casilla de verificación, darles a todos la misma clase y crear una entrada oculta que contenga el equivalente JSON de los datos.

HTML

 <table id="permissions-table">
    <tr>
	<td>
	    <input type="checkbox" class="has-permission-cb" value="Jim">
	    <input type="checkbox" class="has-permission-cb" value="Bob">
	    <input type="checkbox" class="has-permission-cb" value="Suzy">
	</td>
    </tr>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

Javascript para ejecutar en el formulario enviar

var perms = {};
$(".has-permission-checkbox").each(function(){
  var userName = this.value;
  var val = ($(this).prop("checked")) ? 1 : 0
  perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));

La cadena json se pasará con el formulario como $ _POST ["has-permissions-values"]. En PHP, decodifique la cadena en una matriz y tendrá una matriz asociativa que tiene cada fila y el valor verdadero / falso para cada casilla de verificación correspondiente. Entonces es muy fácil recorrer y comparar con los valores actuales de la base de datos.

Tmac
fuente