Pregunta

Tengo un montón de casillas de verificación que están marcadas de forma predeterminada.Mis usuarios probablemente desmarcarán algunas (si las hay) de las casillas de verificación y dejarán marcadas el resto.

¿Hay alguna forma de hacer que el formulario PUBLICE las casillas de verificación que están no comprobados, en lugar de los que son ¿comprobado?

¿Fue útil?

Solución

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 según la condición marcada:

if(document.getElementById("testName").checked) {
    document.getElementById('testNameHidden').disabled = true;
}

Otros consejos

La solución que más me ha gustado 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 las 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.previousSibling para obtener " upper " elementos.

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 tiene que decidir qué hacer con ellos.

PHP, por ejemplo, toma el último valor como el que se debe usar (ver: 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: solo ofrecen 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 una 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 es necesario crear un campo oculto para todas las casillas de verificación, simplemente copie mi código.cambiará el valor de la casilla de verificación si no está marcada value asignará 0 y si la casilla de verificación está marcada, asigne value en 1

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

Puede hacer 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, para que pueda deducir que aquellos ausentes de los valores de formulario publicados ($_POST en PHP) no están marcados.

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

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

Recibí esto de una publicación eliminar valores duplicados de la matriz

" He seguido el enfoque del servidor. Parece funcionar bien, gracias. & # 8211; reach4thelasers el 1 de diciembre de 2009 a las 15:19 " Me gustaría recomendarlo al propietario. 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";

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 pueden asumir .

los valores de casilla de verificación no verificados.

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.

Primero probé la versión de Sam.Buena idea, pero hace que haya varios elementos en el formulario con el mismo nombre.Si utiliza cualquier javascript que busque elementos según el nombre, ahora devolverá una matriz de elementos.

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

/* Delete '.hidden' fields if the original is present, use '.hidden' value if not. */
foreach ($_POST['frmmain'] as $field_name => $value)
{
    // Only look at elements ending with '.hidden'
    if ( !substr($field_name, -strlen('.hidden')) ) {
        break;
    }

    // get the name without '.hidden'
    $real_name = substr($key, strlen($field_name) - strlen('.hidden'));

    // Create a 'fake' original field with the value in '.hidden' if an original does not exist
    if ( !array_key_exists( $real_name, $POST_copy ) ) {
        $_POST[$real_name] = $value;
    }

    // Delete the '.hidden' element
    unset($_POST[$field_name]);
}

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

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 se realice 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 utiliza 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 debe intentar obtener el valor de la entrada con el atributo de tipo checkbox. 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 utilizando 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 de back-end

fuente de imagen

Veo que esta pregunta es antigua y tiene muchas respuestas, pero de todos modos daré mi centavo. Mi voto es por la solución 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 del 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);
        }
    })
});

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.

Lo que hice fue un poco diferente. Primero cambié los valores de todas las casillas de verificación sin marcar. Para & Quot; 0 & Quot ;, luego los seleccionó todos, de modo que el valor se enviaría.

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', no está marcado, 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 Sí / No, S / N o valores 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 el script UPDATE, 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 representación visual, 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 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 se deben actualizar y no hay necesidad de convertir checbox " en " valor en 'Y' o 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');
  }
});

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 esto tiene enviado con la variable $ _POST.

Esto solo se puede lograr con algunos javascript, ya que las casillas de verificación no marcadas no se transmiten. Entonces necesitas javascript que, por ejemplo detrás de escena agrega campos ocultos al desmarcar una casilla de verificación. Sin javascript esto no podría hacerse.

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 en submit, a través de un JavaScript function, marca todas las casillas sin marcar. Entonces, cuando form collection solo aquellos serán recuperados en name aquellos que tienen <=> propiedad.

  //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 utilizando 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 quot; por una unidad cada vez que se chequea 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 matriz isSingle de 5 elementos, por lo que no podrá iterar a la vez a través de las tres matrices para, por ejemplo, insertar 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 tenía la misma casilla de verificación que aparecía muchas veces para diferentes filas de una tabla.Necesitaba saber la fila que representaba la casilla de verificación y también saber el estado de la casilla de verificación (marcada/desmarcada).

Lo que hice fue quitar el atributo de nombre de las entradas de mis casillas de verificación, darles a todas la misma clase y crear una entrada oculta que contendría 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 ejecutarse al enviar el formulario

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 $_POST["has-permissions-values"].En PHP, decodifica la cadena en una matriz y tendrás una matriz asociativa que tiene cada fila y el valor verdadero/falso para cada casilla de verificación correspondiente.Entonces es muy fácil recorrerlo y compararlo con los valores actuales de la base de datos.

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top