Toggle Casilla

tengo 4 casillas de verificación y deseo para alternar ellos (activada o desactivada) y todos ellos deben ser los mismos lo que nunca estado se encuentran tengo esto hasta ahora:.Toggle Casilla

var toggle_click = false; 

function check_them(element){ 

    if(toggle_click){ 
     $('#'+element+'_1').attr('checked', true); 
     $('#'+element+'_2').attr('checked', true); 
     $('#'+element+'_3').attr('checked', true); 
     $('#'+element+'_4').attr('checked', true); 
    } 

    if(!toggle_click){ 
     $('#'+element+'_1').attr('checked', false); 
     $('#'+element+'_2').attr('checked', false); 
     $('#'+element+'_3').attr('checked', false); 
     $('#'+element+'_4').attr('checked', false); 
    } 

    if(!toggle_click){ toggle_click = true; } 
    if(toggle_click) { toggle_click = false; } 
}

al cargar la página algunas de las casillas de verificación pueden estar marcadas o no, pero una vez que hago clic en un enlace y ejecuto esta función, quiero que estas casillas estén todas en el mismo estado.

Cuando pruebo lo anterior, simplemente no parece marcar las casillas y, a veces, las marca todas y la ejecución de esta función nuevamente no hace nada. Que esta pasando? ¡Estoy privado de café y confundido!

¿Debería hacer uso de un grupo de casillas de verificación o algo así?

Gracias a todos por cualquier ayuda

Fuente

2010-03-02 Abs

En las dos últimas filas, si _toggle_click_ es _false_, establézcalo en _true_, luego si es _true_, configúrelo en _false_. No importa cuál sea su valor inicial, siempre será "falsa" al final. Reemplazaría aquellos con 'toggle_click =!toggle_click; '... y use un for-loop para todo el valor de _toggle_click_ después de 'checked'. – LGT

..... ...

var isChecked = false; 

function check_them(element){ 

    if(isChecked === false) { 
     $('#'+element+'_1').attr('checked', true); 
     $('#'+element+'_2').attr('checked', true); 
     $('#'+element+'_3').attr('checked', true); 
     $('#'+element+'_4').attr('checked', true); 
     isChecked = true; 
    } 
    else 
    { 
     $('#'+element+'_1').attr('checked', false); 
     $('#'+element+'_2').attr('checked', false); 
     $('#'+element+'_3').attr('checked', false); 
     $('#'+element+'_4').attr('checked', false); 
     isChecked = false; 
    } 
}

Fuente

2010-03-02 12:33:31 Sarfraz

¡Dios mío! ¿Qué me ha pasado? Si y sangrienta más debería ser usado! Gracias Sarfraz! – Abs

@Abs: eres bienvenido ........... :) – Sarfraz

Esto es innecesariamente detallado –

En lugar de establecer el atributo seleccionados para falsa, basta con retirar por completo! :)

$ ('#' + element + '_ 1'). RemoveAttr ('checked');

He aquí un ejemplo:

var state = $("#element1").attr("checked") === "checked" ? true : false; 
$("#test").click(function(){  
    $("input[id^=element]").each(function(){ 
     if(state === false){ 
      $(this).attr("checked", "checked"); 
     }else{ 
      $(this).removeAttr("checked"); 
     } 
    }); 
    state = !state;   
});

Fuente

2010-03-02 12:30:22

'$ (" # element1 "). Attr (" checked ") ===" checked "' ¿No es lo suficientemente booleano para ti? ¿? true: false' se puede eliminar por completo. –

Si lee el resto del código, verá que, dado que la propiedad se elimina, el atributo es VERDADERO o NO DEFINITIVO. Gracias por el falso -1. –

cuadros es un atributo "divertida". Una cosa que sugeriría es en lugar de attr('checked', false), pruebe removeAttr('checked') en su lugar.

Básicamente, en el DOM, el elemento renderizado se habrá comprobado como un atributo, o si es compatible con XHTML, checked=checked. Por lo tanto, establecerlo en falso no es lo correcto.

En cuanto a los otros problemas, no soy lo suficientemente jQuery profesional como para saber.

Fuente

2010-03-02 12:30:22 Mikezx6r

Es gracioso de hecho. –

Asegúrese de que usted no llama check_them antes de que el DOM se termina de cargar

$(function() { 
    check_them("whatever"); 
});

Además, puede simplificar todo esto a lo siguiente:

var check_them = (function() { 
    var is_checked = false; // Now this is not global, huzzah 
    return function(element) { 
     // You can update all of the elements at once 
     $('#'+element+'_1, #'+element+'_2, #'+element+'_3, #'+element+'_4').attr('checked', !is_checked); 
     is_checked = !is_checked; 
    }; 
})();

Fuente

2010-03-02 12:32:54

Bueno, para un enfoque diferente: Establece casillas de verificación a todo lo que no era:

var toggle_click = false; 
function setCheck(mythis) 
{ 
    $('#'+element+'_1').checked = !mythis.checked; 
    $('#'+element+'_2').checked = !mythis.checked; 
    $('#'+element+'_3').checked = !mythis.checked; 
    $('#'+element+'_4').checked = !mythis.checked; 
    toggle_click = !toggle_click; 
}; 
$(function() { 
    $('#'+element+'_1').click(function() { 
    setCheck(this); 
    }); 
    $('#'+element+'_2').click(function() { 
    setCheck(this); 
    }); 
    $('#'+element+'_3').click(function() { 
    setCheck(this); 
    }); 
    $('#'+element+'_4').click(function() { 
     setCheck(this); 
    }); 
});

NOTA si se les da una clase llamada "mycheckbox" aún más simple:

var toggle_click = false; 
$(function() { 
    $('.mycheckbox').click(function() { 
    $('.mycheckbox').each().checked = !this.checked; 
    toggle_click = !toggle_click; 
    }); 
});

Fuente

2010-03-02 13:09:12

$('tr').click(function(){ 
     var chkbox = document.getElementById("chk"+this.id); 
     chkbox.checked = !chkbox.checked; 

    });

Fuente

2012-11-28 03:05:09 cheth

¿Puede explicar su respuesta? Se ve bien, pero no veo por qué usas 'tr' – ixe013

También se puede hacer uso de JavaScript sin dificultad, se puede usar una imagen o cualquier cosa que le permite hacer clic también.

<html> 
    <body> 
    <a href=" javascript:check();"> Toggle </a> <br> 
    <input type="checkbox" id="c1" > Un/Check me <br> 
    <input type="checkbox" id="c2" > Un/Check me 
    </body> 
</html> 

<script> 
function check() 
{ 
    c1.checked = !c1.checked; 
    c2.checked = !c2.checked; 
} 
</script>

Espero que esto ayude.

Fuente

2017-06-09 01:33:30

Respuesta

Cuestiones relacionadas