2013-09-02 18 views
5

Im folgende Beispiel erhält http://jsfiddle.net/hU89p/200/JQuery Tabellenzeile Wert ausgewähltes Kontrollkästchen

Wie kann ich die Zeilenwerte von ausgewählten Kontrollkästchen auf der onClick Funktion

  Select Cell phone  Rating  Location 
        BlackBerry9650 2/5  UK 
        Samsung Galaxy 3.5/5  US 
        Droid X   4.5/5  REB 

in der folgenden Tabelle erhalten, während der Auswahl Mehrere Checkboxen müssen die entsprechenden Zeilenwerte alarmieren.

function myfunc(ele) { 

var values = new Array(); 
     $.each($("input[name='case[]']:checked"), function() { 
     values.push($(this).val()); 
     alert("val---"+values); 

      )}; 
       } 

Zum Beispiel:

während ersten beiden Kontrollkästchen aktivieren Ich muss get BlackBerry9650, 2/5, UK, and Samsung Galaxy,3.5/5 ,US

Wie es möglich ist?

Antwort

5

jsFiddle Demo

Wenn Sie wollen, dass sie mit Komma und Leerzeichen getrennt werden Sie jede Zelle auf seine eigene schieben kann und verwenden JS Array .join()

var values = new Array(); 

$.each($("input[name='case[]']:checked").closest("td").siblings("td"), 
     function() { 
      values.push($(this).text()); 
     }); 

    alert("val---" + values.join(", ")); 
+0

@chinchu Ich habe etwas mit der Join-Funktion behoben. Nehmen Sie den aktualisierten Code – Itay

+0

Seine Arbeit gut, haben Sie noch einen Zweifel daran, wie Rating-Spalte Werte zu nehmen, wenn ich alle Kontrollkästchen auswählen – Karthiga

+1

Ich möchte nur 1. Spalte Wert dann wie ist das möglich? –

2

Versuchen:

function myfunc(ele) { 
var values = new Array(); 
     $.each($("input[name='case[]']:checked").parents("td").siblings(), function() { 
      values.push($(this).text()); 
      alert("val---"+values); 
     }); 
} 

DEMO FIDDLE

+0

Was ist mit den Kommas? 'Ich muss BlackBerry9650, 2/5, UK und Samsung Galaxy, 3,5/5, US' – Itay

+0

@Itay bekommen. Danke aktualisiert. – Unknown

3
$("input[name='case[]']").click(function(){ 
var values = new Array(); 
     $.each($("input[name='case[]']:checked"), function() { 
      var data = $(this).parents('tr:eq(0)'); 
      values.push({ 'callphone':$(data).find('td:eq(1)').text(), 'rating':$(data).find('td:eq(2)').text() , 'location':$(data).find('td:eq(3)').text()});    
     }); 

     console.log(values); 
}); 

Beispiel: http://jsfiddle.net/hU89p/213/

für die benutzerdefinierte Ausgabeprüfung dieses:

Beispiel: http://jsfiddle.net/hU89p/215/

1

ich Ihre Fiddle ein bisschen aktualisiert haben, der resultierende Code sieht wie folgt aus:
HTML:

<table border="1"> 
    <tr> 
     <th>Select</th> 
     <th>Cell phone</th> 
     <th>Rating</th> 
     <th>Location</th> 
    </tr> 
    <tr> 
     <td align="center"> 
      <input type="checkbox" class="case" name="case" value="1" /> 
     </td> 
     <td>BlackBerry Bold 9650</td> 
     <td>2/5</td> 
     <td>UK</td> 
    </tr> 
    <tr> 
     <td align="center"> 
      <input type="checkbox" class="case" name="case" value="2" /> 
     </td> 
     <td>Samsung Galaxy</td> 
     <td>3.5/5</td> 
     <td>US</td> 
    </tr> 
    <tr> 
     <td align="center"> 
      <input type="checkbox" class="case" name="case" value="3" /> 
     </td> 
     <td>Droid X</td> 
     <td>4.5/5</td> 
     <td>REB</td> 
    </tr> 
    </tr> 
</table> 

Script:

$('[name=case]').click(function() { 
    checkAll(); 
}); 

function checkAll() { 
    $('[name=case]:checked').each(function() { 
     alert('selected: ' + $(this).val()); 
    }); 
} 
Verwandte Themen