如何使用另一列中的相同值检查所有复选框

时间:2017-10-06 08:44:03

标签: jquery drop-down-menu

如果我的row值为Dropdown menuSent的值等于{{},我正在尝试检查桌面上每个Status Column的所有复选框1}}。我现在可以选中/取消选中我桌子上的所有复选框。但是现在我需要在下拉菜单Sent时检查所有状态为Sent。我很感激所有答案。请检查下面的代码。非常感谢

view.html

Sent

的script.js

                   <thead>
                    <tr>
                        <td><strong><input type="checkbox" id="checkAll">Check All</strong></td>
                        <td><strong>Status</strong></td>

                    </tr>
                   </thead>

               <tbody> <tr>
                    <td><input type="checkbox"/></td>
                    <td value="Sent">Sent</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td value="Created">Created</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td value="Created">Created</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td value="Sent">Sent</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td value="Sent">Sent</td>
                </tr> </tbody>

               <select class="form-control" id="default-select">

              <option value="delete">Created</option>
              <option value="stored">Stored Status</option>
              <option value="sent">Sent Status</option>
                                  </select>

2 个答案:

答案 0 :(得分:1)

这是我喜欢做的最简单的方式。查看DEMO。我给了复选框clas并在更改select的值时触发了函数,然后检查值是什么。如果已发送,则单击我创建的类。

答案 1 :(得分:1)

DEMO ATTACHED:请求后更新,这可能是帮助

$(document).ready(function(){
    $("#default-select").on("change",function(){
    $("input").prop("checked",false);
       
 $("td").each(function(i,v){
 
 if($(this).text().trim() ==  $("#default-select").val()){
 
       $(this).closest("tr").find("input").prop("checked",true);
       }
 });

});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
 <thead>
                    <tr>
                        <td><strong><input type="checkbox" id="checkAll">Check All</strong></td>
                        <td><strong>Status</strong></td>

                    </tr>
                   </thead>

               <tbody>
               <tr>
                    <td><input type="checkbox" /></td>
                    <td>sent</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td >created</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td >created</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>sent</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>sent</td>
                </tr> 
                 <tr>
                    <td><input type="checkbox"/></td>
                    <td>stored</td>
                </tr> 
                </tbody>
</table>
<select class="form-control" id="default-select">

              <option value="created">Created</option>
              <option value="stored">Stored Status</option>
              <option value="sent">Sent Status</option>
                                  </select>