CODEWITHSUNDEEP
javascriptjqueryhtml
tonymiao
tonymiao

Reputation: 305

Get Checkbox's id number when it is clicked in grid with JQuery

I write a demo on JSFIDDLE, please see demo.

HTML:

<table id = 't'>
<thead>
<tr >
    <td><input class='Flag' type="checkbox" id="mq"/></td>
    <td>firstname</td>
    <td>secondname</td>
    <td>lastname</td>
</tr>
</thead>
<tbody>
    <tr >
    <td><input class='Flag' type="checkbox" id="1"/></td>
    <td>lorem</td>
    <td>ipsum</td>
    <td>css</td>
    </tr>
    <tr >
    <td><input class='Flag' type="checkbox" id="2"/></td>
    <td>lorem</td>
    <td>ipsum</td>
    <td>css</td>
    </tr>
    <tr >
    <td><input class='Flag' type="checkbox" id="3"/></td>
    <td>lorem</td>
    <td>ipsum</td>
    <td>css</td>
    </tr>
    <tr >
    <td><input class='Flag' type="checkbox" id="4"/></td>
    <td>lorem</td>
    <td>ipsum</td>
    <td>css</td>
    </tr>
    <tr >
    <td><input class='Flag' type="checkbox" id="5"/></td>
    <td>lorem</td>
    <td>ipsum</td>
    <td>css</td>
    </tr>
</tbody>

CSS:

tr,td{border:1px solid black;}

JS:

$("tbody input").click(function(){
var closestTr = $(':checkbox:checked').closest('input').attr('id');
alert(closestTr);});

In demo I want to alert id number of each line when user clicks on checkbox. For example: when you click checkbox on line 2, browser alerts 2 and when you click checkbox on line 3, browser then alerts 3. But I didn't implement this in demo. Please give me some advice.

Upvotes: 0

Views: 56

Answers (1)

zfrisch
zfrisch

Reputation: 8660

http://jsfiddle.net/0wz3h1vc/

You want to specifically get the checkbox id and there aren't any others, so you can technically scrap the "tbody" in your event code. Then display the id by grabbing the attribute "id" and throwing it in the variable

Edit: to explain more thoroughly, because the click on THIS element is causing the event, you can specify $(this) in jQuery to select the element and pull it's id by using the attribute method .attr(attribute) 

$("input").click(function(){
var closestTr = $(this).attr("id");
alert(closestTr);});

Upvotes: 1

Related Questions