Question

HTML：

<table class="vi_table">
    <thead>
        <tr>
            <th><input type="checkbox" class="v_checkbox"/>Select</th>
            <th>ID</th>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>5</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>1</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td><input type="checkbox" class="v_checkbox"/></td>
            <td>9</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>

<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

的CSS：

.diff_color {
    background: gray;
}

.vi_table {
    background: #c3ced6;
    border: 1px solid black;
    margin-bottom: 30px;
    padding: 5px;
}

.vi_table thead tr th {
    border: 1px solid black;
}

Jquery的：

$(document).ready(function () {
    $(document).on('click', '.vi_table tbody tr', function (e) {
        var submit = $('#percentage_submit_button');
        var checked= $(this).find('input[type="checkbox"]');

        submit.prop('disabled', true);

        checked.prop('checked', !checked.is(':checked'));

        if($('.v_checkbox').is(':checked')) {
            $(this).closest('tr').addClass('diff_color');
            submit.removeAttr('disabled');
        } else {
            $(this).closest('tr').removeClass('diff_color');
            submit.prop('disabled', true);
        }
    });


    $(document).on('click', 'input[type="checkbox"]', function () {
        $(this).prop('checked', !$(this).is(':checked'));
        $(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
    });

});

So Far - Fiddle

我想点击checkbox上的任意位置选中row，包括复选框。如果在enable中选中了任何一个复选框，我希望disable和button tbody。

点击Selectall checkbox需要选择所有行并启用按钮。

我在选择和取消选中复选框时仍有一些问题。

我给出了迄今为止我尝试过的示例，但我想将其视为非重复代码。如何才能使这段代码变得简单而有效？

由于

Answer 1

进行一些更改，使复选框对齐。有关详细信息，请参阅代码注释：

如果代码段不起作用

Fiddle

＆＃13;

var testing = function (e) {
    var submit = $('#percentage_submit_button');
    var checkbox = $(this);
    if ($(this).is('tr')) {
        checkbox = $(this).find('input[type="checkbox"]');
    }

    submit.prop('disabled', true); // Disable submit button

    checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
    
    if (checkbox.hasClass('all')) { // If this is "all"
        $('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked'));  // Set all other to same as "all" 
        if (checkbox.is(':checked')) { // change colour of "all" tr
            checkbox.closest('tr').addClass('diff_color');  
        } else {
            checkbox.closest('tr').removeClass('diff_color');  
        }
    }

    var blnAllChecked = true; // Flag all of them as checked
    $('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
        if ($(this).is(':checked')) {
            $(this).closest('tr').addClass('diff_color');
            submit.prop('disabled', false); // enable submit if one is checked
        } else {
            $(this).closest('tr').removeClass('diff_color');
            blnAllChecked = false; // If one is not checked, flag all as not checked
        }
    });
    
    if (blnAllChecked) {
        $('.v_checkbox.all').closest('tr').addClass('diff_color');
        $('.v_checkbox.all').prop('checked', true);
    } else {
        $('.v_checkbox.all').closest('tr').removeClass('diff_color');
        $('.v_checkbox.all').prop('checked', false);
    }
};

$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);

＆＃13;

.diff_color {
    background: gray;
}
.vi_table {
    background: #c3ced6;
    border: 1px solid black;
    margin-bottom: 30px;
    padding: 5px;
}
.vi_table thead tr th {
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
    <thead>
        <tr class="pv">
            <th>
                <input type="checkbox" class="v_checkbox all" />Select</th>
            <th>ID</th>
            <th>A</th>
            <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>5</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>1</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
        <tr class="pv">
            <td>
                <input type="checkbox" class="v_checkbox" />
            </td>
            <td>9</td>
            <td>Content 2</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">

＆＃13;

Answer 2

我在select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>

中添加了一个id

首先检查选择所有输入。将它的状态应用于每个输入，然后使用.each（）循环遍历每一行并应用行样式。

在这里演示：JSfiddle

$(document).ready(function () {
    var testing = function (e) {
        var submit = $('#percentage_submit_button');
        var checked = $(this).find('input[type="checkbox"]');
        var checkedAll = $('#v_checkbox_all');
        var isAllChecked = false;

        submit.prop('disabled', true);

        checked.prop('checked', !checked.is(':checked'));
        $(this).prop('checked', !$(this).is(':checked'));

        var checkedCount = $('.v_checkbox:checked').not('#v_checkbox_all').length;
        var totalCount = $('.v_checkbox').not('#v_checkbox_all').length;

        if (checked.prop('id') === 'v_checkbox_all') {
            isAllChecked = true;
        } else {
            if (checked.prop('id') === 'v_checkbox_all' || checkedCount === totalCount) {
                checkedAll.prop('checked', true);
            } else {
                checkedAll.prop('checked', false);
            }
        }

        if (isAllChecked) {
            if (checkedAll.is(':checked')) {
                $('.v_checkbox').each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $('.v_checkbox').each(function () {
                    $(this).prop('checked', false);
                });
            }
        }

        $('.v_checkbox').each(function () {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('diff_color');
                submit.removeAttr('disabled');
            } else {
                $(this).closest('tr').removeClass('diff_color');
            }
        });
    };

    $(document).on('click', '.pv', testing);
    $(document).on('click', 'input[type="checkbox"]', testing);

    $('#percentage_submit_button').prop('disabled', true);
});

Answer 3

要选择所有复选框，请使用以下代码：

 $('.v_checkbox').change(function(){
        $('.v_checkbox').each(function(){
        $(this).prop( "checked", true );
        })
    ;
    })

单击表格行以选中复选框并禁用/启用按钮jquery

HTML：

的CSS：

Jquery的：

3 个答案: