如何在 Jquery Mobile 中使用复选框突出显示表格行？

Question

我有一个带有表格的 Jquery Mobile 网站。表格行包括第一个单元格中的复选框。

我想突出显示行，当
a) 用户点击一行
b) 用户选中复选框

我已经成功完成了大部分工作 (credits)，但还剩下一个问题。

问题：
如果单击复选框，则仅突出显示该行，并且无法选中该复选框。我认为这是因为 event.target.type !== 'checkbox' 不适用于 Jquery Mobile，因为如果我单击复选框，我会单击 span.ui-图标 而不是实际的输入：复选框。

所以我正在寻找某种方法来检测用户是否点击了 span.ui-icon 与复选框。

这是一个显示问题的 Jfiddle - http://jsfiddle.net/qQQ2X/

还有jquery代码：

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");
    }

});

感谢您的帮助！

Answer 1

经过一番折腾，我找到了解决方案。如果你有以下工作：

a) 用于选择所有表格行的复选框，称为 $('#selectAll')
b) 每行中的复选框以选择 单行，称为 $('.selector') = 这些在 TH 单元格中，而所有其他单元格都是 TD
c) 可点击的行，它也应该选择一行

因此可以通过三个“事件”选择记录
a) 选择所有记录
b) 选择单条记录
c) 点击行选择单条记录

您需要设置三个事件绑定，它们都会触发一个 select&highlight 函数。这是代码：

// 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")
                  }
            }
      }

像魅力一样工作。也许有人也可以使用它。迟早会有 JQM 表格布局。