DataTables + input checkboxesdon't work

Question

I have some checkboxes that work fine, but when I try to program their value in the following listener I can only check/uncheck the boxes via clicking on the table row, and not the checkbox:

$('body').on('click', '#sourceTable tbody tr', function() {

var r = dTable.fnGetData(this);
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);

if (document.getElementById(boxId).checked){   //checked is true
    document.getElementById(boxId).checked=false;   //uncheck the box
}
else{
    document.getElementById(boxId).checked=true;   //check the box
}
});

Any idea how I can do both?

EDIT: With changes advised in answer below looks like this, only checkboxes are clickable not rows, data isn't being read from DataTable row either:

$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {

e.stopPropagation();
var r = dTable.fnGetData('#sourceTable tbody tr');
var boxId = r[2].substr(r[2].indexOf("id")+4, 7);
//alert($(boxId).val());

if (document.getElementById(boxId).checked){
    document.getElementById(boxId).checked=false;
    var i = PEMSToDisplay.indexOf(r[0]);
    if(i != -1) {
        PEMSToDisplay.splice(i, 1);
    }
}
else{
    document.getElementById(boxId).checked=true;
    PEMSToDisplay.push(r[0]);
}
});

LeGEC · Accepted Answer · 2013-12-03 14:43:58Z

When you click on the checkbox, the browser executes the default action on mousedown/mouseup (change the checkbox' state), then your handler is triggered correctly, and the checkbox changes state again.

See this fiddle :

$('body').on('click', '.foobar',  function(){
    var chk = $('#cb').prop( 'checked' );
    $('#cb').prop( 'checked', !chk );
    var after = $('#cb').prop( 'checked' );

    console.log('before :', chk, 'after :', after);
});

Notice how, when you click on the checkbox, the initial state is not the one you see - the browser has already altered the checkbox state before your click handler is executed.

One way to change your handler : if the target of the click event is the checkbox itself, don't do anything :

$('body').on('click', '.foobar', function(e){
    if( !$(e.target).is('#cb') ){
        var chk = $('#cb').prop('checked');
        $('#cb').prop('checked', !chk );
    }
});

fiddle

Note : I initially thought you could prevent the checkbox state change using e.preventDefault(), but it didn't work - tried it on mousedown and mouseup with no success.

Jonathan · Accepted Answer · 2013-12-03 14:38:02Z

1

You need to target both the table row #sourceTable tbody tr and the checkbox, which I assume will be something like #sourceTable tbody tr td input. Following this you will need to stop the click event from bubbling up the DOM tree from the input to the table row, triggering both, by using stopPropagation.

$('#sourceTable tbody tr, #sourceTable tbody tr td input').click(function (e) {
    e.stopPropagation();
    ...

You will also need to replace this with $('#sourceTable tbody tr') as this could be either the row or the checkbox.

Edit: As per the comments, this would be better as:

$('#sourceTable tr, #sourceTable input').click(function (e) {    
    e.stopPropagation();
    var r = dTable.fnGetData($(this).closest('tr').get(0));
    ...

edited Dec 3, 2013 at 14:38

answered Dec 3, 2013 at 14:01

Jonathan

1,83314 silver badges15 bronze badges

6 Comments

Jonathan Over a year ago

@gjw80 Please can you provide an example of your mark-up as this worked for me with a simple table containing a check-box input.

Jonathan Over a year ago

var r = dTable.fnGetData('#sourceTable tbody tr'); should be var r = dTable.fnGetData($('#sourceTable tbody tr'));, does this help?

Jonathan Over a year ago

You can also simplify your selectors by using $("#sourceTable tr, #sourceTable input").click(function(e) { see example here (jsfiddle.net/puh6G/1)

Jonathan Over a year ago

Sorry, you can target the tr by using $(this).closest('tr') so dTable.fnGetData($(this).closest('tr')); should work.

Jonathan Over a year ago

Again, I missed that fnGetData takes an object not a JQuery object so adding .get(0) should solve that. I have updated my original post.

|

Collectives™ on Stack Overflow

DataTables + input checkboxesdon't work

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related