Question

在我的项目中，我有这张表：

<table id="filter-table" class="table table-striped">
  <thead>
    <tr>
      <td>Accessory</td>
      <td>Typology</td>
      <td>Check</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Acc 1</td>
      <td id="typology">
        <div class="idtypology" style="display:none">1</div>Typology name</td>
      <td>
        <input type="checkbox" />
      </td>
      <tr>
  </tbody>
</table>

和此下拉菜单：

<select>
  <option value="1">Type 1</option>
  <option value="2">Type 2</option>
  <option value="3">Type 3</option>
  <option value="5">Select All</option>
</select>

dropdownmenù选项的值与类idtypology的隐藏div相同。在更改此元素（使用.change（）jquery函数）时，我希望能够检查具有idtypology div值= <tr>的所有复选框，以实际选择的选项值

例如，如果下拉值为1，我想检查所有带有idtypology = 1的复选框

这可能吗？

Answer 1

使用类似的东西设置你的html ....

 <td id="typology">Typology name</td>
 <td><input type="checkbox" data-idtypology='1' /></td>

然后使用jquery这样的东西

 $(document).on('change', 'select', function(){
     var val= $(this).val();
     $('[data-idtypology="'+val+'"]').prop('checked', true);
 });

Answer 2

我会使用HTML5数据属性：

http

和JS

<table id="filter-table" class="table table-striped">
    <thead>
        <tr>
            <td>  Accessory </td>
            <td> Typology </td>
            <td> Check </td>
        </tr>
    </thead>
    <tbody>
        <tr data-typology="1">
            <td> Acc 1</td> 
            <td id="typology">Typology name</td>
            <td> <input type="checkbox" /></td>
        <tr>
    </tbody>
</table>

Answer 3

您好下面是检查复选框的方法，您可以根据您的要求进行更改。我希望它有所帮助。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<table id="filter-table" class="table table-striped">
<thead>
    <tr>
        <td>  Accessory </td>
        <td> Typology </td>
        <td> Check </td>
    </tr>
</thead>
<tbody>
    <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 1</div> Typology name</td>
        <td> <input type="checkbox" /></td>
    <tr>
    <tr>
        <td> Acc 2</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 2</div> Typology name</td>
        <td> <input type="checkbox" /></td>
    <tr>
</tbody><br />
<select>
  <option value="0">Select All</option>
  <option value="1">Type 1</option>
  <option value="2">Type 2</option>
  <option value="3">Type 3</option>
</select>
<script>
$(document).ready(function(e) {
    $("select").change(function(){
        var v=$(this).val();
        $(".idtypology:contains('"+v+"')").parents("tr").children().find("input[type='checkbox']").attr("checked", true);
    });
});
</script>

Answer 4

首先像这样更改你的HTML

$(function () {
$('#filter').change(function () {
    var filterid = $(this).val();
    $(':checkbox').prop('checked', false);
    $('.type'+filterid).prop('checked', true);
});//click

}）;

    <tbody>
    <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 1</div> Typology name</td>
        <td> <input type="checkbox" class="type1" /></td>
    <tr>
       <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 3</div> Typology name</td>
        <td> <input type="checkbox"  class="type3"/></td>
    <tr>
            <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 2</div> Typology name</td>
        <td> <input type="checkbox" class="type2" /></td>
    <tr>
            <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 2</div> Typology name</td>
        <td> <input type="checkbox"  class="type2"/></td>
    <tr>
                 <tr>
        <td> Acc 1</td> 
        <td id="typology"> <div class="idtypology" style="display:none"> 1</div> Typology name</td>
        <td> <input type="checkbox"  class="type1"/></td>
    <tr>

</tbody>


<select id="filter">
    <option value="" disabled selected>--Select--</option>
  <option value="1">Type 1</option>
  <option value="2">Type 2</option>
  <option value="3">Type 3</option>
  <option value="5">Select All</option>
</select>

Jquery检查表中的复选框

4 个答案: