POSTAR casillas de verificación HTML sin marcar

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?

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;
}

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>

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).

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.

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.

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');
        }
    })
})

$('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.

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.

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

"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";

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.

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.

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]);
}

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.

fuente de imagen

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

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;
    });
});

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
)

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

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);
    }
  });
}

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

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.

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');
  }
});

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 :)

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.

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);">

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.

@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>

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 ()

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);

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.