Question

I am using jqGrid and I added a column of checkboxes to the grid but I want to alert which checkbox is checked .. here is my code

 dataGrid.prototype = { display: function () { var self = this; var html = []; var check = 0; html.push("<table id='" + this.id + "" + "'class='table'>\\n</table>"); html.push("<div id='pagger_" + this.id + "'></div>"); $('body').append(html.join("")); $("#" + this.id).jqGrid({ url: "index.jsp", styleUI: 'Bootstrap', datatype: "local", data: this.data, colModel: this.getColModels(this.data[0]), onSelectRow: this.editRow, viewrecords: true, width: 1300, height: 250, rowNum: 50, pager: "#pagger_" + this.id, loadComplete: function () { var iCol = self.getColumnIndexByName('Enable'); var rows = $("#" + this.id).jqGrid('getGridParam', 'data'); var i; var c = rows.length; for (i = 0; i < c; i += 1) { $(rows[i].cells[iCol]).click( function (e) { var id = $(e.target).closest('tr')[0].id, isChecked = $(e.target).is(':checked'); alert("checked:" + isChecked); // you can also get the // values of the row // data alert('clicked on the checkbox in the row with id=' + id + '\\nNow the checkbox is ' + (isChecked ? 'checked' : 'not checked')); }); } } }); }, getColNames: function (data) { var keys = []; for (var key in data) { if (data.hasOwnProperty(key)) { keys.push(key); } } return keys; }, getColModels: function (data) { var colNames = this.getColNames(data); var colModelsArray = []; var str2; for (var i = 0; i < colNames.length; i++) { var str1; str1 = { name: colNames[i], index: colNames[i], align: 'center', editable: true, edittype: "text", }; colModelsArray.push(str1); } str2 = { name: 'Enable', index: 'Enable', formatter: 'checkbox', editable: true, edittype: 'checkbox', width: 60, align: 'center', formatoptions: { disabled: false }, editoptions: { value: '1:0' }, }; colModelsArray.push(str2); return colModelsArray; }, getColumnIndexByName: function (columnName) { var cm = $("#" + this.id).jqGrid('getGridParam', 'colModel'), i, l; for (i = 0, l = cm.length; i < l; i += 1) { if (cm[i].name === columnName) { return i; } } return -1; }, }; 

hint ..

1. the data is json object
2. whenever i print rows[i] it gives me [object object]

Whats wrong here?

Answer 1

You can trust delegation instead of adding a handler to every checkbox. Let's assume you put an ID to the container, like #containerDataGrid:

$("#containerDataGrid").on("click", "input[type=checkbox]", function(e){
  var $this = $(this); //this is the checkbox
  //this is more reliable than e.target, 
  // because it DOES point to the input not some child it could have
  var $row = $this.closest("tr"); //in case the rows are tr. If not, change by the class or parameter identifying a row


  var id = $row.attr("id"); //here's the ID you want! :D


  console.log("The checkbox in the row: ",$row, " which has id= ", id, " is " $this.is(":checked")?"checked":"not checked");
});

If you only wanted to get some particular checkbox, you can make the "input[type=checkbox]" selector more specific, adding a class for instance:

"input[type=checkbox].the-checkbox-I-want"

or making sure it's the child of a wrapper:

".wrapper-of-my-beloved-checkbox > input[type=checkbox]"