2013-08-20 11 views
16

Ho una tabella HTML con una casella di controllo in ogni riga.
Desidero eseguire il loop sulla tabella e verificare se sono presenti caselle di controllo selezionate.
Quanto segue non funziona:Casella Loop over html e checkbox spuntati (JQuery)

$("#save").click(function() { 
    $('#mytable tr').each(function (i, row) { 
     var $actualrow = $(row); 
     checkbox = $actualrow.find('input:checked'); 
     console.log($checkbox); 
}); 

Questo stampa nella console il seguente:

[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]

per fila indipendentemente dal fatto che qualsiasi casella è selezionata.

Aggiornamento
stesso problema con:

$('#mytable tr').each(function (i, row) {                         
    var $actualrow = $(row); 
    $checkbox = $actualrow.find(':checkbox:checked'); 
    console.log($checkbox); 
}); 
+3

Sì, un oggetto jQuery viene stampato sulla console, che è normale. Hai controllato la sua proprietà 'length'? –

+1

Hai provato con '$ actualrow.find ('input'). Is (': checked');' –

+0

log '$ checkbox.length'. La lunghezza è zero? –

risposta

48

Utilizzare questo invece:

$('#save').click(function() { 
    $('#mytable').find('input[type="checkbox"]:checked') //... 
}); 

Permettetemi di spiegare ciò che il selettore fa: input[type="checkbox"] significa che questo corrisponderà ogni <input /> con tipo attributo type uguale a checkbox Dopodiché: :checked corrisponderà a tutte le caselle di controllo selezionate.

È possibile ciclare su queste caselle di controllo con:

$('#save').click(function() { 
    $('#mytable').find('input[type="checkbox"]:checked').each(function() { 
     //this is the current checkbox 
    }); 
}); 

Ecco demo in JSFiddle.


Ed ecco un demo che risolve esattamente il tuo problema http://jsfiddle.net/DuE8K/1/.

$('#save').click(function() { 
    $('#mytable').find('tr').each(function() { 
     var row = $(this); 
     if (row.find('input[type="checkbox"]').is(':checked') && 
      row.find('textarea').val().length <= 0) { 
      alert('You must fill the text area!'); 
     } 
    }); 
}); 
+0

Voglio ottenere il singolo.Se una casella è selezionata ma la casella di testo nella stessa riga non è piena voglio mostrare un avviso – Jim

+0

ok, lascia che ti dia un esempio. –

+0

@Jim controlla questa soluzione http://jsfiddle.net/DuE8K/1/ –

-1

Nel codice è un }); mancante.

$("#save").click(function() { 
    $('#mytable tr').each(function (i, row) { 
     var $actualrow = $(row); 
     $checkbox = $actualrow.find('input:checked'); 
     console.log($checkbox); 
    }); 
}); 
0
Il seguente frammento di codice abilita/disabilita un pulsante a seconda che almeno una casella di controllo che la pagina è stata controllata .
$('input[type=checkbox]').change(function() { 
    $('#test > tbody tr').each(function() { 
     if ($('input[type=checkbox]').is(':checked')) { 
      $('#btnexcellSelect').removeAttr('disabled'); 
     } else { 
      $('#btnexcellSelect').attr('disabled', 'disabled'); 
     } 
     if ($(this).is(':checked')){ 
      console.log($(this).attr('id')); 
     }else{ 
      console.log($(this).attr('id')); 
     } 
    }); 
}); 

Ecco demo in JSFiddle.