javascript - varios - JQuery está cambiando el valor de la casilla de verificación, pero la casilla de verificación no se muestra como marcada

validar varios checkbox javascript

Question

Tengo una lista con una casilla de verificación y algo de texto (como la bandeja de entrada del correo electrónico). Quiero marcar / desmarcar la casilla de verificación cuando hago clic en cualquier lugar del elemento de la lista (fila). He utilizado el siguiente código en el evento click de la fila:

$(this).find(".cbx input").attr(''checked'', true);

Por primera vez, muestra la casilla de verificación marcada. Pero cuando hago clic en seleccionarlo la próxima vez, el valor de la casilla de verificación marcada = "marcada" en el código html (lo revisé en Firebug) pero la casilla de verificación no aparece como marcada.

Answer 1

Casi correcto, solo usa ''checked'' en lugar de true:

$(this).find(".cbx input").attr(''checked'', ''checked'');

Actualización: Alternativamente, puede usar esto con las versiones más recientes de JQuery:

$(this).find(".cbx input").prop(''checked'', true);

Answer 2

Con .attr() establece el valor de un atributo en el árbol DOM. Dependiendo del navegador, la versión del navegador y la versión de jQuery (especialmente 1.6), esto no siempre tiene el efecto deseado.

Con .prop() , manipula la propiedad (en este caso, ''estado comprobado''). Recomiendo utilizar .prop() en su caso, por lo que lo siguiente se alternará correctamente:

$(this).find(".cbx input").prop(''checked'', true);

Para obtener más información, consulte la documentación de .prop () .

Answer 3

Esta solución no funcionó para mí (es decir, establecer el estado verificado con prop).

$("#checkbox-reminder").prop("checked", true);

Si bien el estado subyacente siempre se actualizó correctamente, la pantalla no se repintará correctamente.

Esto puede ser resuelto con

$("#checkbox-reminder").prop("checked", true).checkboxradio();
$(''#checkbox-reminder'').checkboxradio(''refresh'');

Mira este thread para más información.

Answer 4

Fácil, la solución es usar $ (''xxxxxx'') .pop (''checked'', true ) o false Test OK en Jquery 1.11.x.

Aclamaciones

EJEMPLO DE CÓDIGO DEMO COMPLETO

Ejemplos: (casilla de verificación JavaScript de código para una tabla)

    function checkswich() {
        if ($(''#checkbox-select'').is('':checked'') == true) {
            selectTodo();
        } else {
            deSelectTodo();
        }
    }
    function selectTodo() {
        //$(''#tabla-data input.ids:checkbox'').attr(''checked'', ''checked'');
        $(''#tabla-data input.ids:checkbox'').prop(''checked'', true);
    }
    function deSelectTodo() {
        //$(''#tabla-data input.ids:checkbox'').removeAttr(''checked'', ''checked'');
        $(''#tabla-data input.ids:checkbox'').prop(''checked'', false);
    }
    function invetirSelectTodo() {
        $("#tabla-data input.ids:checkbox").each(function (index) {
            //$(this).attr(''checked'', !$(this).attr(''checked''));
            $(this).prop(''checked'', !$(this).is('':checked''));
        });
    }

Ejemplos: (casilla de verificación HTML de código para una tabla)

           <table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th>
                        <th>Engine</th>
                        <th><a href="#" class="">Browser</a></th>
                        <th class="td-actions text-center" style="width: 8%;">Acciones</th>
                    </tr>
                </thead>
                <tbody id="tabla-data" class="checkbox-data">
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element(''table-data-bts'',[''id''=>1234,''action''=>[''view''=>''view'', ''edit''=>''edit'', ''delete''=>''delete'']]) ?>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element(''table-data-bts'',[''id''=>1234,''action''=>[''view''=>''view'', ''edit''=>''edit'', ''delete''=>''delete'']]) ?>
                        </td>
                    </tr>
                    <tr>
                        <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
                        <td>#########</td>
                        <td>#######</td>
                        <td class="td-actions text-center">
                            <?= $this->element(''table-data-bts'',[''id''=>1234,''action''=>[''view''=>''view'', ''edit''=>''edit'', ''delete''=>''delete'']]) ?>
                        </td>
                    </tr>
                </tbody>
            </table>

Ejemplo: (Código ComponentHTML use JavaScript)

<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" >
<input type="hidden" name="accion" id="accion">

<div class="btn-group">
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span>
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Options</span>
</button>
<ul class="dropdown-menu">
    <li><a href="#" onclick="accion()">Action Demo</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#" onclick="selectTodo()">Select All</a></li>
    <li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li>
    <li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li>
</ul>

Answer 5

nada me funcionó inicialmente en Chrome, aunque funcionaba bien en mozilla. Más tarde descubrió que el estilo de CSS personalizado hacía que la marca de verificación no estuviera visible.

Answer 6

 $("[id*=''" + value + "''] input").prop(''checked'', false);

attr también funcionó (pero solo por primera vez) Pero prop funciona siempre.

Answer 7

useing **.prop()** it worked for me !

$(document).on("click",".first-table tr",function(e){
if($(this).find(''input:checkbox:first'').is('':checked''))
{
    $(this).find(''input:checkbox:first'').prop(''checked'',false);
}else
{
    $(this).find(''input:checkbox:first'').prop(''checked'', true);
}
});