opcion - checkbox html5 ejemplos

POST sin marcar las casillas de verificación HTML

Question

Tengo una carga 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 el resto marcado.

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

Answer 1

"He optado por el enfoque del servidor. Parece que funciona bien, gracias. - alcance a los lectores 1 de diciembre de 09 a las 15:19" Me gustaría recomendarlo del propietario. Como se cita: la solución javascript depende de cómo funciona el controlador del servidor (no lo verifiqué)

como

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

Answer 2

@cpburnz lo entendió 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 (note el nombre del campo usando 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>

Answer 3

Agregue una entrada oculta para la casilla de verificación con un 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 verificada:

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

Answer 4

El ejemplo de acciones Ajax es ('': verificado'') utilizado jQuery en lugar de .val ();

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

params obtendrá valor en VERDADERO O FALSO.

Answer 5

El problema con las casillas de verificación es que si no están marcadas, entonces 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 utilizar 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 comprobación isset () en su elemento de casilla de verificación. Si el elemento que está esperando no está establecido 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, entonces no siempre sabrá el nombre del atributo de sus casillas de verificación, si no conoce el nombre de la casilla de verificación, no podrá usar la función isset para verificar si se ha enviado con La variable $ _POST.

Answer 6

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

Lo que hice fue quitar el atributo de nombre de mis entradas de la casilla de verificación, darles a todos la misma clase y crear una entrada oculta que pudiera contener el equivalente de 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 forma de envío

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-permisos-valores"]. 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 correspondiente. Entonces es muy fácil recorrer y comparar los valores actuales de la base de datos.

Answer 7

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

Si sus nombres de entrada están en "estilo de formulario", perderá la asociación de í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 así 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 5 elementos, por lo que no podrá iterar de una vez a través de las tres matrices para, por isSingle , Por ejemplo, inserte empleados en una base de datos.

Puede superar esto con un sencillo postprocesamiento de matriz. Estoy usando PHP en el lado del servidor y lo hice:

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

Answer 8

Esto solo se puede lograr con algunos javascript, ya que las casillas de verificación no seleccionadas no se transmiten. Por lo tanto, necesita un javascript que, por ejemplo, detrás de escena, agregue campos ocultos al desmarcar una casilla de verificación. Sin javascript esto no se podría hacer.

Answer 9

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 una function JavaScript, marca todas las casillas sin marcar. Por lo tanto, cuando submit solo esos, se recuperarán en la form collection aquellos que tengan propiedades de name .

  //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 cajas ocultas adicionales y manipularlas.

Answer 10

He probado la versión de Sam primero. Buena idea, pero hace que haya varios elementos en el formulario con el mismo nombre. Si usa cualquier javascript que encuentre elementos en función del 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]); }

Answer 11

La mayoría de las respuestas aquí requieren el uso de JavaScript o controles de entrada duplicados. A veces esto debe ser manejado 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 valores sin marcar para 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 el formulario fue enviado (se asigna un valor al elemento de entrada de envío), se puede asumir cualquier valor de 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 estaban 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 pueden cargarse en cada carga de página, pero solo deben modificarse si se envía el formulario. Dado que los nombres de las casillas de verificación se conocen de antemano, pueden recorrerse e inspeccionarse individualmente, de modo que la ausencia de sus valores individuales indica que no están marcados.

Answer 12

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 manera que si la casilla de verificación no está marcada, la entrada oculta sigue siendo exitosa y se envía al servidor, pero si la casilla de verificación está marcada, anulará la entrada oculta anterior. De esta manera, no tiene que realizar 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>

Answer 13

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 de verificación está marcada. Eso significa que la secuencia de comandos 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 seleccionados). En realidad, solo los valores negativos son problemáticos (cuando el usuario desmarca el valor previamente marcado): ¿cómo puede saberlo 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é se deben recibir todas las casillas de verificación para establecer el valor de Y para el valor marcado y el valor de N para los no seleccionados (no recibidos).

Dado que almaceno los valores ''Y'' y ''N'' en mi base de datos y los represento a través de las 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 de ''Y'' y ''N'' y luego uso las casillas de verificación solo para efectos visuales representación, y use la función simple JavaScript check () para establecer el valor de si de acuerdo con 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>

use un JavaScript onclick listener y call function check () 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 qué campos se deben actualizar y no hay necesidad de convertir el valor de "on" en "Y" o no se ha recibido la casilla de verificación en "N". ''.

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

No es necesario que agregue explícitamente la escucha de clics como antes, puede usar la biblioteca jQuery para agregar dinámicamente la escucha de clics con función para 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'');
  }
});

Answer 14

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

Answer 15

Lo resolví utilizando 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 ni saltos de línea entre estos dos elementos de entrada!

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

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

Answer 16

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>

El navegador no se preocupará realmente por lo que haces 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 usa (consulte: Posición autorizada de las claves de consulta GET de HTTP duplicadas )

Pero otros sistemas con los que trabajé (basados ​​en Java) lo hacen a la perfección: solo le ofrecen el primer valor. En su lugar, .NET le dará una matriz con ambos elementos en su lugar.

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

Answer 17

Preferiría cotejar el $ _POST

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

importa, si el POST no tiene el valor ''checkboxname'', no se verificó así, asigne un valor.

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

Answer 18

Puede agregar elementos ocultos antes de enviar el formulario.

$(''form'').submit(function() {
  $(this).find(''input[type=checkbox]'').each(function (i, el) {
    if(!el.checked) {
      var hidden_el = $(el).clone();
      hidden_el[0].checked = true;
      hidden_el[0].value = ''0'';
      hidden_el[0].type = ''hidden''
      hidden_el.insertAfter($(el));
    }
  })
});

Answer 19

Puedes hacer algo de Javascript en el evento de envío del formulario. Eso es todo lo que puedes hacer, sin embargo, no hay manera de hacer que los navegadores hagan esto por sí mismos. 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 que faltan en los valores del formulario publicado ( $_POST en PHP) no están marcados.

Answer 20

Realmente haría lo siguiente.

Tener mi campo de entrada oculto con el mismo nombre con la 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, a fin de mostrar cada uno de los valores únicos.

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

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

Answer 21

También me gusta la solución que acaba de publicar un campo de entrada adicional, el uso de JavaScript me parece un poco difícil.

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 apariciones 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 de checkbox . Así que 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 apariciones se concatenan con una coma (ASP.NET / IIS), deberá (dividir / explotar) la cadena utilizando una coma como delimitador para crear un tipo de datos de lista. ( [] )

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

fuente de imagen

Answer 22

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

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

Answer 23

Todas las respuestas son excelentes, 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 por debajo del 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. animar :)

Answer 24

Una técnica común alrededor de 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, intentamos ver si la entrada correspondiente de la casilla de verificación se envía en el formulario de datos o no.

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

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 a la pregunta, pero proporciona un medio alternativo para lograr una funcionalidad similar.

Answer 25

Veo que esta pregunta es vieja y tiene muchas respuestas, pero de todos modos daré mi centavo. Mi voto es para la solución javascript en el evento ''enviar'' del formulario, como han señalado algunos. No duplique las entradas (especialmente si tiene nombres y atributos largos con código php mezclado con html), sin molestias en el servidor (que requerirían conocer todos los nombres de campo y verificarlos uno por uno), solo busque todos los elementos no seleccionados , asigne un valor de 0 (o lo que sea que necesite para indicar un estado ''no marcado'') y luego cambie su atributo ''marcado'' 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ás una matriz $ _POST como esta:

Array
(
            [field1] => 1
            [field2] => 0
)

Answer 26

Yo uso este bloque de jQuery, que agregará una entrada oculta en el momento de envío a cada casilla de verificación sin marcar. Garantizará que siempre obtenga un valor enviado para cada casilla de verificación, cada vez, sin desordenar su marca y arriesgarse a no hacerlo en una casilla de verificación que agregue más adelante. También es agnóstico para cualquier pila de back-end (PHP, Ruby, etc.) que estés usando.

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

Answer 27

no necesita crear un campo oculto para todas las casillas de verificación, solo copie mi código. cambiará el valor de la casilla de verificación si no se marca, el value asignará 0 y si se marca la casilla de verificación, asignará el 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'');
        }
    })
})

Answer 28

Versión jQuery de la respuesta de @vishnu.

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

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

Answer 29

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

Answer 30

$(''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 omite el nombre de la casilla de verificación, no se pasa. Sólo la matriz test_checkbox.