Need Checkbox ON Row Select?

nhchola

Upon RowSelect i want some column to be displayed checkBox,
Upon Click the checkbox, the corresponding cell value should change "0" to "1" or "1" to "0" (toggle)

I tried the following code, the checkbox is displayed but i can not make any changes on the check box,
[code]
$('#myTable').delegate('tr', 'click', function(event)
{

var aPos = oTable1.fnGetPosition(this);
var aData = oTable1.fnGetData(aPos);
var jqTds = $('>td', this);


if(aData[2]==0)
jqTds[2].innerHTML = '';
else
jqTds[2].innerHTML = '';

if(aData[3]==0)
jqTds[3].innerHTML = '';
else
jqTds[3].innerHTML = '';

if(aData[4]==1)
jqTds[4].innerHTML = '';
else
jqTds[4].innerHTML = '';

if(aData[5]==1)
jqTds[5].innerHTML = '';
else
jqTds[5].innerHTML = '';

if(aData[6]==1)
jqTds[6].innerHTML = '';
else
jqTds[6].innerHTML = '';
}


[/code]

jsmith88

Use $.prop().

First, let's assume your setup looks something like this:
[code]






Row 1







Row 2

...etc...
[/code]

Now let's hook up our custom click listener, and make it look something like this:

[code]$("#myTable").on("click", "tr", function() {

// find the checkbox, and make sure it's visible
var $checkbox = $($(this).find("input")[0]).show();

// determine if the checkbox is currently checked or not.
var isChecked = $checkbox.is(":checked");

// now change the value of the checkbox using $.prop
// $.prop("checked", true) <-- set a checkbox to checked
// $.prop("checked", false) <-- set a checkbox to unchecked
// by passing it the opposite if isChecked (i.e. !isChecked), we'll
// effectively toggle the state of it
$checkbox.prop("checked", !isChecked);
});[/code]

The above example works with a single checkbox. You could easily expand this to toggle all checkboxes using something like this:
[code]$("#myTable").on("click", "tr", function() {


var $checkboxes = $(this).find("input");

$checkboxes.each(function() {
// "this" should now reference a checkbox in the loop

// find the checkbox, and make sure it's visible
var $checkbox = $(this).show();

// determine if the checkbox is currently checked or not.
var isChecked = $checkbox.is(":checked");

// now change the value of the checkbox using $.prop
// $.prop("checked", true) <-- set a checkbox to checked
// $.prop("checked", false) <-- set a checkbox to unchecked
// by passing it the opposite if isChecked (i.e. !isChecked), we'll
// effectively toggle the state of it
$checkbox.prop("checked", !isChecked);
});

});[/code]

Untested, but this should get you on the right track. Again, the secret is $.prop().

Also, instead of trying to reference these input boxes by their column index, give them class names instead. It's going to be make life tough if you move these columns around but you have hard-coded column index. e.g..
[code]






Row 1







Row 2

...etc...


// Then in code, instead of doing
jqTds[2].something()

// you can instead have something more readable, like
$(thisRow).find("input.isComplete").something()
[/code]