javascript - Click table row to select checkbox and disableenable button jquery - Stack Overflow

admin管理员组

文章数量:1432187

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

I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.

clicking the Selectall checkbox needs to select all the rows and enable the button.

Still I have some issues on selecting and deselecting the checkbox.

I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?

Thanks

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

I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.

clicking the Selectall checkbox needs to select all the rows and enable the button.

Still I have some issues on selecting and deselecting the checkbox.

I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?

Thanks

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Apr 28, 2015 at 10:27 Learner asked Apr 28, 2015 at 10:07 LearnerLearner 4,63611 gold badge2222 silver badges2424 bronze badges 5

• hi i have checked your code. Fidle is not working because you have not included jquery Try this jsfiddle/hoqw2tay/1 – Manish Shukla Commented Apr 28, 2015 at 10:16
• Thanks @manishshukla I updated it. – Learner Commented Apr 28, 2015 at 10:18
• It's working. But still after I select the multiple rows and deselected it and still the row was highlighting. @manishshukla – Learner Commented Apr 28, 2015 at 10:38
• try this jsfiddle/hoqw2tay/9 – Manish Shukla Commented Apr 28, 2015 at 10:44
• @manishshukla Thank you very much. Is it possible that we can add the select all code into the same function? selecting all should select all the tbody checkboxes and enable the button – Learner Commented Apr 28, 2015 at 10:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Made a few changes so the checkboxes align. See code ments for further info:

Fiddle in case Code Snippet doesn't work

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./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="mit" type="submit" value="Set % for Selections">

I added an id to the select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>

The select all input is checked first. Applying it's status to each input, then using the .each() to loop though each row and apply the row styles.

Demo here: 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);
});

For selecting ALL checkboxes use this code:

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

本文标签： javascriptClick table row to select checkbox and disableenable button jqueryStack Overflow