How to get selected checkbox row's value using Jquery?

Question

I want to get the values of selected check box row's value using Jquery.

For that, First I try to alert a message,if user checked the checkbox using Jquery. But I failed.

Note: I am adding checkbox in a row using Jquery, and then User will select the checkbox.

Here is my code to add checkbox in row through AJAX code

$('#btnSearchVendor').click(function(){
    $.ajax({
        type:"POST",
        contentType:"application/json;charset=utf-8",
        url: "GPCreateCheque.aspx/BindData",
        data:"{}",
        dataType:"json",
        success: function (data) {
            alert("success = "+data.d[0].DOCTYPE);
            for(var i=0;i<data.d.length;i++){
                $("#ContentPlaceHolder1_GridView1").append("<tr><td><input id=\"Checkbox"+i+"\" class=\"checkBoxClass\" type=\"checkbox\" /></td><td>" + data.d[i].DOCTYPE + "</td><td>" + data.d[i].DOCNUMBR + "</td><td>" + data.d[i].ActualAmount + "</td></tr>");
            }
        },
        error:function(result){
            alert("Error");
        }
    })
})

Jquery code to make alert when user select the checkbox

$('.checkBoxClass').click(function () {
    alert("Checkbox state (method 1) = " + $('.checkBoxClass').prop('checked'));
    //alert("Checkbox state (method 2) = " + $('.checkBoxClass').is(':checked'));
});

Above code is working fine, I added the checkbox. Below pic is the output with console

use event delegation if you add the checkbox dynamically use `.on()` — guradio, Jul 10 '17 at 12:38
@guradio can you please give me a example with code?. thanks — Liam neesan, Jul 10 '17 at 12:39
elevating on @guradio's comment I would suggest to use `$("body").on("click", "#idOfElement", function(){ //code here });` if you are dynamically creating the checkboxes — N. Ivanov, Jul 10 '17 at 12:40
Read up on ***[Event delegation](http://learn.jquery.com/events/event-delegation/)*** — charlietfl, Jul 10 '17 at 12:42
And you want the current element...not the first checkbox with that classss which is what `$('.checkBoxClass').prop('checked'));` returns — charlietfl, Jul 10 '17 at 12:48

Super User · Accepted Answer · 2017-07-10T12:53:44.093

1

You can use following script for this

$(document).on('click','.checkBoxClass',function () {
    alert("Checkbox state (method 1) = " +  $(this).prop('checked'));

    if($(this).prop('checked') == true) {
        alert("Actual Amount = " + $(this).closest('tr').find('td:last-child').html());
    }
});

edited Jul 10 '17 at 12:53

answered Jul 10 '17 at 12:39

Super User

9,448
3
31
47

This will only show checked property of ***first*** `.checkBoxClass` in the page... has nothing to do with the one that event occured on – charlietfl Jul 10 '17 at 12:46
@SuperUser error occurred like `".checkBoxClass".is is not a function` – Liam neesan Jul 10 '17 at 12:47
check updated answer – Super User Jul 10 '17 at 12:48
@SuperSuper thanks, It's working. Can you tell how can I get that column's name of `Actual Amount` of selected row – Liam neesan Jul 10 '17 at 12:50
@mohamedfaiz check updated answer – Super User Jul 10 '17 at 12:53
@SuperUser please don't choose last child. Can you choose by column number. because In actual record I will have more than 8 column, So **How can I choose particular column?** – Liam neesan Jul 10 '17 at 12:57
@mohamedfaiz it depands on you which column you want. you can use `:nth-child(4)` for this. or you can add a class to it and set a custom selector – Super User Jul 10 '17 at 13:00
@SuperUser thanks, I got it. I add the id for that td, then I use that id to get the value. – Liam neesan Jul 10 '17 at 13:02
instead of `id` you can use `class` because `id` should have unique value on page, & as per your question you have repeated `tr` – Super User Jul 10 '17 at 13:03

score 1 · Answer 2 · edited Jul 11 '17 at 08:10

You can use this code to get the corresponding row value of the clicked checkbox

$(document).ready(function() {

  $('.checkBoxClass').on('click', function() {
    debugger
    if ($(this).prop('checked')) {
      var columns = $(this).closest('tr').find('td:not(:first-child)');
      $(columns).each(function(index) {
        console.log("Column " + (index + 1) + " has value " + $(this).text());
      });
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
  <thead>
    <tr>
      <th></th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' id='checkbox1' class='checkBoxClass' /></td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
    </tr>
    <tr>
      <td><input type='checkbox' id='checkbox1' class='checkBoxClass' /></td>
      <td>Content 222</td>
      <td>Content 3333</td>
      <td>Content 4444</td>
    </tr>
  </tbody>
</table>

It makes sure that value is printed on console only when checkbox is selected.

How to get selected checkbox row's value using Jquery?

2 Answers2