单击 table 行到 select 复选框和 disable/enable 按钮 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;
}

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

我想 select checkbox 通过单击 row 上的任意位置（包括复选框）。我想 enable 和 disable button 如果任何一个复选框在 tbody 中被 selected。

单击 Selectall checkbox 需要 select 所有行并启用按钮。

在 select 和取消 select 复选框方面我仍然有一些问题。

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

谢谢

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

Answer 2

我在 select 所有输入中添加了一个 id <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>

首先检查select 所有输入。将它的状态应用于每个输入，然后使用 .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 );
        })
    ;
    })

单击 table 行到 select 复选框和 disable/enable 按钮 jquery

Click table row to select checkbox and disable/enable button jquery

html

javascript

checkbox

jquery

HTML:

Css:

Jquery: