jQuery根据水平的tr的类名检查td中的所有复选框

时间：2019-03-20 04:45:08

标签： javascript jquery html

enter image description here这是我的示例代码。附加了图像。我需要的格式

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]').prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked;
        if (!isChecked) {
            allChecked = false;
        } else {
            allChecked = allSlaves.filter(":checked").length === allSlaves.length;
        }
        master.prop("checked", allChecked);
    }
});

$(".groupHead").next().find("[type=checkbox]").change();
.groupHead td { background-color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

Fiddle中的代码在垂直方向上工作正常。

  1. 当第一行中的类别为groupHeadCheck时，所有ID为1、2和3的复选框也将被选中。
  2. 并且如果所有1、2和3复选框均已选中，则第一行中的复选框将被选中。
  3. 我想使它以水平模式而不是垂直模式工作

请帮忙！

5 个答案:

答案 0 :(得分：1)

只需简化几串代码

.groupHead td { background-color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>
public class ListImage{
// SDCard Path
//choose your path for me i choose sdcard
final String MEDIA_PATH = Environment.getExternalStorageDirectory().getAbsolutePath() + "/Your Folder Name/Path";
private ArrayList<ImageModel> imageList = new ArrayList<>();

// Constructor
public ListImage() {

}

public ArrayList<ImageModel> getPlayList() {

    File home = new File(MEDIA_PATH);
    if (home.listFiles(new FileExtensionFilter()) != null) {
        if (home.listFiles(new FileExtensionFilter()).length > 0) {
            for (File file : home.listFiles(new FileExtensionFilter())) {
                ImageModel imageModel = new ImageModel();
                imageModel .setaName(file.getName().substring(0, (file.getName().length() - 4)));
                imageModel .setaPath(file.getPath());

                imageList.add(imageModel);
            }
        }
    }
    return imageList;
}
class FileExtensionFilter implements FilenameFilter {
    public boolean accept(File dir, String name) {
        return (name.endsWith(".jpg") || name.endsWith(".JPG") || name.endsWith(".mp4") || name.endsWith(".MP4")); // add more conditions here
    }
   }
  }

答案 1 :(得分：1)

检查

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var pt =  $(this).parents("tr");
    var isChecked = this.checked;
    pt.find("input[type=checkbox]").prop("checked", isChecked);
   
});

$(".groupHead").next().find("[type=checkbox]").change();
.groupHead td { background-color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

稍微修改了您的代码，希望您正在寻找这种逻辑。.请评论一下是否可行

$("table tbody").on("change", ".groupHeadCheck", function (e) { 
    var currentCB = $(this);
    var pt =  $(this).parents("tr");
    var isChecked = this.checked;
    pt.find("input[type=checkbox]").prop("checked", isChecked);
   
});

$(".groupHead").next().find("[type=checkbox]").change();
.groupHead td { background-color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

答案 2 :(得分：1)

我已经做了你想要的。

如果所有其他复选框都被选中，它还将自动选中页面加载时的复选框，然后它将选中第一个复选框。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
</head>
<body>

    <table>
        <tbody>
            <tr>
                <th>
                    1. <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="1" />
                </td>
                <td>
                    <input type="checkbox" id="2" />
                </td>
                <td>
                    <input type="checkbox" id="3" />
                </td>
            </tr>
            <tr>
                <th>
                    2. <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="4" />
                </td>
            </tr>
            <tr>
                <th>
                   3.  <input type="checkbox" class="groupHeadCheck" />
                </th>
                <td>
                    <input type="checkbox" id="6" checked="checked" />
                </td>
                <td>
                    <input type="checkbox" id="7" checked="checked"/>
                </td>
            </tr>        
        </tbody>
    </table>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).on("change", "input[type=checkbox]", function (e) { 
        var currentCB = $(this);
        var isChecked = this.checked;
        if (currentCB.is(".groupHeadCheck")) {
             currentCB.parents('tr').find('[type="checkbox"]').prop('checked', isChecked);
        } 

        $(document).find('tr').each(function(){
           var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
           var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;

           if((total_chk_in_row - 1) == total_checked_chk){
                jQuery(this).find('.groupHeadCheck').prop('checked',true);
           }

        });
    });

     $(document).find('tr').each(function(){
           var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
           var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;

           if((total_chk_in_row - 1) == total_checked_chk){
                jQuery(this).find('.groupHeadCheck').prop('checked',true);
           }

     });

    $(".groupHead").next().find("[type=checkbox]").change();
</script>

</body>
</html>

答案 3 :(得分：1)

您可以尝试以下方式：

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    if($(this).hasClass('groupHeadCheck') && $(this).is(':checked')){
      $(this).closest('tr').find('td input').prop('checked', 'checked');
    }
    else if($(this).hasClass('groupHeadCheck') && $(this).not(':checked')){
      $(this).closest('tr').find('td input').removeAttr('checked');
    }
    
    if(!$(this).hasClass('groupHeadCheck')){
      var total = $(this).closest('tr').find('td input').length;
      var chekced = $(this).closest('tr').find('td input:checked').length;
      if(total == chekced){
        $(this).closest('tr').find('th .groupHeadCheck').prop('checked', 'checked');
      }
      else{
        $(this).closest('tr').find('th .groupHeadCheck').removeAttr('checked');
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

答案 4 :(得分：1)

您还可以使用它在开始时检查主菜单的复选框

$("table tbody")
  .each((index, tbody) => {
    $(tbody).find('tr').each((index, tr) => checkMasterCheckboxesInTr(tr))
  })
  .on("change", "input[type=checkbox]", function (e) { 
      var currentCB = $(this);
      var isChecked = this.checked;

      if (currentCB.is(".groupHeadCheck")) {
          var allCbs = currentCB.closest('tr').find('[type="checkbox"]').prop('checked', isChecked);
      } else {
          checkMasterCheckboxesInTr(currentCB.closest('tr'))
      }
  });

function checkMasterCheckboxesInTr(tr) {
  var allCbs = $(tr).find('[type="checkbox"]');
  var allSlaves = allCbs.not(".groupHeadCheck");
  var master = allCbs.filter(".groupHeadCheck");
  var allChecked = allSlaves.filter(":checked").length === allSlaves.length;
  master.prop("checked", allChecked);
}
.groupHead td { background-color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>
                1. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="1" />
            </td>
            <td>
                <input type="checkbox" id="2" />
            </td>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr>
            <th>
                2. <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr>
            <th>
               3.  <input type="checkbox" class="groupHeadCheck" />
            </th>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

相关问题
最新问题