dina osama dina osama - 7 months ago 17
Javascript Question

check which checkbox is checked

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

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

  console.log("The checkbox in the row: ",$row, " which has id= " $row.attr('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]"

Comments