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

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;
}

J查询:

$(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

我想通过单击行 上的任意位置(包括复选框)来选择复选框。如果在 tbody 中选择了任何一个复选框，我想启用和禁用 按钮。

单击全选复选框需要选择所有行并启用该按钮。

我在选择和取消选择复选框时仍然遇到一些问题。

我给出了到目前为止我尝试过的例子，但我想让它像非重复代码一样干净。我怎样才能使这段代码更简单、更有效？

谢谢

Answer 1

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

Fiddle万一代码片段不起作用

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);

.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;
}

<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">