Clicca ginocchiera con jQuery

Question

Ho usato una funzione hover dove si fa x al passaggio del mouse e ye mouseout. Sto cercando la stessa cosa per click, ma non sembra funzionare:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

Voglio che la casella di controllo per controllare quando si fa clic su un div e incontrollato se cliccato di nuovo - un click ginocchiera

.

Answer 1

Questo è fatto facilmente lanciando allo stato attuale 'controllato' della casella di controllo su ogni scatto. Esempi:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

o

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

o, manipolando direttamente il DOM 'controllata' di proprietà (cioè non utilizzando attr() a prendere l'attuale stato della casella di controllo cliccato):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

... e così via.

Nota: dal momento che jQuery 1.6, caselle di controllo devono essere impostati utilizzando prop non attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

Answer 2

Un altro approccio sarebbe quello di jQuery esteso in questo modo:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Quindi chiamare:

$('.offer').find(':checkbox').toggleCheckbox();

Answer 3

Attenzione: utilizzando attr () o prop () per cambiare lo stato di una casella di controllo non sparare il evento di modifica nella maggior parte dei browser che ho provato con. Lo stato controllato cambierà, ma nessun evento di bubbling. È necessario attivare l'evento Modificare manualmente dopo aver impostato l'attributo controllato. Ho avuto alcuni altri gestori di eventi di monitoraggio dello stato di caselle di controllo e avrebbero lavorato bene con clic degli utenti diretti. Tuttavia, l'impostazione dello stato controllato a livello di codice non riesce a innescare costantemente l'evento di modifica.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

Answer 4

È possibile utilizzare il toggle funzione:

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

Answer 5

Perché non in una sola riga?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

Answer 6

Ho un singolo casella di nome chkDueDate e un oggetto HTML con un evento click nel seguente modo:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

Cliccando l'oggetto HTML (in questo caso un <span>) commuta verificare la proprietà della casella di controllo.

Answer 7

jQuery:. Modo migliore, delegare le azioni da jQuery (jQuery = jQuery)

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

Answer 8

provare a cambiare questo:

$(this).find(':checkbox').attr('checked', true ); 

a questo:

$(this).find(':checkbox').attr('checked', 'checked'); 

Non al 100% sicuro che lo farà, ma mi sembra di ricordare che ha un problema simile. Buona fortuna!

Answer 9

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

Answer 10

In JQuery non credo che click () accetta due funzioni per la commutazione. Si consiglia di utilizzare la funzione di commutazione () per questo: http://docs.jquery.com/Events/toggle

Answer 11

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

Answer 12

soluzione più semplice

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

Answer 13

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

Answer 14

Un'altra soluzione alternativa per commutare valore casella:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

Answer 15

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});