jquery：如何返回類別列表？

Question

在這個表格中，每行有1個複選框。如何從複選框檢查的所有行中返回類別名稱列表？

HTML：

<tbody> 
    <table> 
     <tr style="height: auto" role="row" class="jqgfirstrow"> 
      <td style="height: 0px; width: 55px;" role="gridcell"> 
      </td> 
      <td style="height: 0px; width: 150px;" role="gridcell"> 
      </td> 
      <td style="height: 0px; width: 150px;" role="gridcell"> 
      </td> 
     </tr> 
     <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="1"> 
      <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
       <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden" 
        value="false" name="Catchecked"> 
      </td> 
      <td aria-describedby="jqgCategories_Name" title="Beverages" style="text-align: left;" 
       role="gridcell"> 
       Beverages 
      </td> 
      <td aria-describedby="jqgCategories_Description" title="Soft drinks, coffees, teas, beers, and ales" 
       style="text-align: left;" role="gridcell"> 
       Soft drinks, coffees, teas, beers, and ales 
      </td> 
     </tr> 
     <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="2"> 
      <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
       <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden" 
        value="false" name="Catchecked"> 
      </td> 
      <td aria-describedby="jqgCategories_Name" title="Condiments" style="text-align: left;" 
       role="gridcell"> 
       Condiments 
      </td> 
      <td aria-describedby="jqgCategories_Description" title="Sweet and savory sauces, relishes, spreads, and seasonings" 
       style="text-align: left;" role="gridcell"> 
       Sweet and savory sauces, relishes, spreads, and seasonings 
      </td> 
     </tr> 
     <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="7"> 
      <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
       <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden" 
        value="false" name="Catchecked"> 
      </td> 
      <td aria-describedby="jqgCategories_Name" title="Produce" style="text-align: left;" 
       role="gridcell"> 
       Produce 
      </td> 
      <td aria-describedby="jqgCategories_Description" title="Dried fruit and bean curd" 
       style="text-align: left;" role="gridcell"> 
       Dried fruit and bean curd 
      </td> 
     </tr> 
     <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="8"> 
      <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
       <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden" 
        value="false" name="Catchecked"> 
      </td> 
      <td aria-describedby="jqgCategories_Name" title="Seafood" style="text-align: left;" 
       role="gridcell"> 
       Seafood 
      </td> 
      <td aria-describedby="jqgCategories_Description" title="Seaweed and fish" style="text-align: left;" 
       role="gridcell"> 
       Seaweed and fish 
      </td> 
     </tr> 
    </table> 
</tbody> 

Answer 1

在某些功能將這個只要你需要到c從表中選擇類別：

var table = ...; // get the table DOMElement or jQuery object here 
var categories = []; 
$(':checkbox[checked]', table).each(function() { 
    categories.push($(this).parent().next().text().trim()); 
}); 
//alert(categories); // return an array of categories 

這是jsFiddle。

Answer 2

試試這個：

$('input[type="checkbox"]').change(function(){ 
    var cat = $('input[type="checkbox"]:checked').parent().next().map(function(){ 
        return $(this).attr('aria-describedby') 
       }).get() 
}) 

DEMO

Answer 3

$('#clickhere').click(function() { 
    var categories = []; 
    $('input:checkbox:checked').each(function() { 
     categories.push($(this).parent('td').next('td').text().trim()); 
    }); 
    alert(categories); 
}); 

http://jsfiddle.net/LvbDQ/1/

Answer 4

我並不完全確定您打算如何處理每個選中的值，但以下內容將顯示您正在查找的文本。

$("table input[type=checkbox]:checked").each(function() 
    { 
    console.log($.trim($("td[aria-describedby=jqgCategories_Name]", $(this).closest("tr")).text())); 
    }); 

Answer 5

你可以在這裏找到上述查詢的完整解決方案。

演示：http://codebins.com/bin/4ldqp8w

HTML

<div class="input"> 
    <span> 
    <input type="button" name="btnget" id="btnget" value="Get Categories"/> 
    </span> 
    <span id="result"> 
    </span> 
</div> 

<table> 
    <tr style="height: auto" role="row" class="jqgfirstrow"> 
    <td style="height: 0px; width: 55px;" role="gridcell"> 
    </td> 
    <td style="height: 0px; width: 150px;" role="gridcell"> 
    </td> 
    <td style="height: 0px; width: 150px;" role="gridcell"> 
    </td> 
    </tr> 
    <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="1"> 
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
     <input type="checkbox" value="true" name="Catchecked" id="Catchecked"> 
     <input type="hidden" 
     value="false" name="Catchecked"> 
    </td> 
    <td aria-describedby="jqgCategories_Name" title="Beverages" style="text-align: left;" 
    role="gridcell"> 
     Beverages 
    </td> 
    <td aria-describedby="jqgCategories_Description" title="Soft drinks, coffees, teas, beers, and ales" 
    style="text-align: left;" role="gridcell"> 
     Soft drinks, coffees, teas, beers, and ales 
    </td> 
    </tr> 
    <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="2"> 
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
     <input type="checkbox" value="true" name="Catchecked" id="Catchecked"> 
     <input type="hidden" 
     value="false" name="Catchecked"> 
    </td> 
    <td aria-describedby="jqgCategories_Name" title="Condiments" style="text-align: left;" 
    role="gridcell"> 
     Condiments 
    </td> 
    <td aria-describedby="jqgCategories_Description" title="Sweet and savory sauces, relishes, spreads, and seasonings" 
    style="text-align: left;" role="gridcell"> 
     Sweet and savory sauces, relishes, spreads, and seasonings 
    </td> 
    </tr> 
    <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="7"> 
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
     <input type="checkbox" value="true" name="Catchecked" id="Catchecked"> 
     <input type="hidden" 
     value="false" name="Catchecked"> 
    </td> 
    <td aria-describedby="jqgCategories_Name" title="Produce" style="text-align: left;" 
    role="gridcell"> 
     Produce 
    </td> 
    <td aria-describedby="jqgCategories_Description" title="Dried fruit and bean curd" 
    style="text-align: left;" role="gridcell"> 
     Dried fruit and bean curd 
    </td> 
    </tr> 
    <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="8"> 
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell"> 
     <input type="checkbox" value="true" name="Catchecked" id="Catchecked"> 
     <input type="hidden" 
     value="false" name="Catchecked"> 
    </td> 
    <td aria-describedby="jqgCategories_Name" title="Seafood" style="text-align: left;" 
    role="gridcell"> 
     Seafood 
    </td> 
    <td aria-describedby="jqgCategories_Description" title="Seaweed and fish" style="text-align: left;" 
    role="gridcell"> 
     Seaweed and fish 
    </td> 
    </tr> 
</table> 

的jQuery：

$(function() { 
    $("#btnget").click(function() { 
     $("#result").html(""); 
     var categories = new Array(); 
     $(".jqgrow").each(function() { 
      if ($(this).find("td:first input[type=checkbox]").is(":checked")) { 
       categories.push($(this).find("td[aria-describedby=jqgCategories_Name]").text().trim()); 
      } 
     }); 
     if (categories.length > 0) { 
      $("#result").html(categories.join(",")); 
     } 
    }); 
}); 

演示：http://codebins.com/bin/4ldqp8w