如何在Jquery Mobile中使用複選框來突出顯示錶行？

Question

我有一個表的JQuery的移動網站。表格行包含第一個單元格中的複選框。

我想強調的行，當
一）在一排
二）用戶檢查複選框

我設法把它做得最多的方式向用戶點擊（credits）並留下一個問題。

問題：
如果我點擊複選框，僅該行被突出顯示，我不能讓該複選框成爲選中。我認爲這是因爲event.target.type！=='複選框'不適用於Jquery Mobile，因爲如果我點擊複選框，我點擊span.ui-icon而不是實際的輸入：複選框。

所以我正在尋找一些方法來檢測用戶是否點擊span.ui-圖標與複選框。

下面是一個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

經過多次調整，我找到了一個解決方案。下面的作品，如果您有：

一）複選框以選擇所有錶行，叫$（「＃全選」）
二）每一行選擇單行的複選框，名爲$（ 「.selector」）=這些是TH細胞，相對於所有其它單元是TD
c）中可點擊行，這也應該選擇通過三個‘事件’
行因此

記錄可以被選擇a）選擇所有記錄
b）選擇單條記錄
C）單擊行選擇單個記錄

您需要設置三個事件綁定，這是所有火選擇&亮點功能。這是代碼：

// 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-tablelayouts。