Question

I have a Jquery Mobile site with a table. Table rows include checkboxes in the first cell.

I want to highlight rows, when
a) the user clicks on a row
b) the user checks the checkbox

I have managed to get it done most of the way (credits) and have one problem left.

Problem:
if I click the checkbox, only the row is highlighted and I cannot get the checkbox to become checked. I think this is because event.target.type !== ‘checkbox’ does not work with Jquery Mobile, because if I click the checkbox, I’m clicking on the span.ui-icon and not the actual input:checkbox.

So I’m looking for some way to detect if the user clicked on the span.ui-icon vs. the checkbox.

Here is a Jfiddle showing the problem – http://jsfiddle.net/qQQ2X/

And the jquery code:

var initRow = initRow = $('.tbl_orders tbody tr');

initRow.has('th input:checkbox:checked').addClass('row_selected ui-btn-hover-e').removeClass("ui-btn-up-b").end().bind('click', function(event) {
    $(this).hasClass('row_selected') ? $(this).addClass("ui-btn-up-b").removeClass('row_selected ui-btn-hover-e') : $(this).addClass('row_selected ui-btn-hover-e').removeClass("ui-btn-up-b");

    if (event.target.type !== 'checkbox') {
        $(this).find('th input:checkbox', this).attr('checked', function() {
            return !this.checked;
        }).checkboxradio("refresh");
    }

});

Thanks for help!

Answer 1

After much fiddling I found a solution. The following works if you have:

a) a checkbox to select all table rows, called $(‘#selectAll’)
b) checkboxes in every row to select a single row, called $(‘.selector’) = these are in TH cells, vs. all other cells being TD
c) clickable rows, which should also select a row

Records can therefore be selected through three “events”
a) selecting all records
b) selecting single record
c) clicking row to select a single record

You need to set up three event bindings, which all fire a select&highlight function. This is the code:

// all rows
$('#selectAll').live( "change", function( event ) {                 
   rowHighlight(event, "all");
   });

// single row
$('.your_table tbody tr').bind('click', function( event ) {
   if ( $( event.target ).is('td') ) {
       rowHighlight(event, "row");
       }
   });

// click row checkbox - careful not to fire #selectAll a 2nd time
$('input.selector:not(#selectAll)').live( "change", function( event ){
   rowHighlight(event, "checkbox");
   });

 // global handler
 function rowHighlight(event, origin) {
var selectTheme = your-JQM-select-theme,
    // this determines which inputs to check and which rows to highlight
    checkWhat = origin == "all" ? $("tbody th input.selector" ) : origin == "row" ? $( event.target ).closest('tr').find('th input[type="checkbox"].selector') : $( event.target ), 
    // this determines whether to clear/clean or check/highlight
    action = origin == "all" ?  ( $('#selectAll').attr('checked') == "checked" ? "check" : "clear" ) : origin == "row" ? ( checkWhat.attr('checked') == "checked" ? "clear" : "check" ) : ( checkWhat.attr('checked') == "checked" ? "check" : "clear" ),
    parentTheme = checkWhat.closest('tr').hasClass('odd') ? your_odd_JQM-theme : your_event_JQM_theme;

    // let's go
    if (action == "check") {
        // select/highlight
        checkWhat.attr('checked','checked')
           .closest('th').find("label").addClass("ui-checkbox-on").removeClass("ui-checkbox-off").end()
           .closest('th').find(".ui-icon").addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off').end()
           .closest('tr').addClass('row_selected ui-btn-hover-'+selectTheme).removeClass("ui-btn-up-"+parentTheme);
            //no need .checkboxradio("refresh")
            } else {
               // clear/clean
               checkWhat.removeAttr('checked')
                  .closest('th').find("label").addClass("ui-checkbox-off").removeClass("ui-checkbox-on").end()
                  .closest('th').find(".ui-icon").addClass('ui-icon-checkbox-off').removeClass('ui-icon-checkbox-on').end()
                  .closest('tr').addClass('ui-btn-up-'+parentTheme).removeClass("row_selected ui-btn-hover-"+selectTheme);
                  // no need .checkboxradio("refresh")
                  }
            }
      }

Works like a charm. Maybe someone can use this, too. There must be JQM-tablelayouts sooner or later.