If checkboxes are found within the table's rows and cells, add the parent row class if none of the

Question

If checkboxes are found within the table's rows and cells, add the parent row class if none of the

I am attempting to implement a small script within my table under the following conditions: The table contains a checkbox within each tr td, and I want my jQuery script to be applied only if the selector identifies a tr where all td checkboxes are unchecked. If only one checkbox is checked within a tr row, then I do not want to add a class to the parent tr.

Essentially, I need to add a class to the parent tr only when none of the td checkboxes within the entire tr row are selected.

Below is my script:

$(function () {
    $('#callScr').on('click', function (e) {
        $(".table tr input:not(:checked)").each(function (i, obj) {
            $(this).parent().parent().addClass("yourClass");
        });
    })
});

Link to my fiddle:

Currently, the script is adding the class to all parent tr elements, even if one checkbox is selected...

javascript jquery html css

Answer 1

Answer №1

If you want to also remove a class when a checkbox is checked, you can use the following jQuery code:

$(function(){
    $('#callScr').on('click', function(e){
        $('.table tbody tr').each(function(){
            $(this).toggleClass('yourClass',$(this).find(':checkbox:checked').length == 0);
        });
    });
});

Check out this example on JSFiddle!

Answer 2

If you want to also remove a class when a checkbox is checked, you can use the following jQuery code:

$(function(){
    $('#callScr').on('click', function(e){
        $('.table tbody tr').each(function(){
            $(this).toggleClass('yourClass',$(this).find(':checkbox:checked').length == 0);
        });
    });
});

Check out this example on JSFiddle!

Answer 3

Answer №2

Iterate over each tr within the tbody and calculate the number of checked checkboxes inside it. If the count is 0, then add a specific class.

$(function () {
    $('#executeFunction').on('click', function(e) {
        $(".table tbody tr").each(function(index, element) {
            if ($(this).find(":checkbox:checked").length == 0)
                $(this).addClass("selectedStyle");
        });
    });
});

UPDATED FIDDLE

Answer 4

Iterate over each tr within the tbody and calculate the number of checked checkboxes inside it. If the count is 0, then add a specific class.

$(function () {
    $('#executeFunction').on('click', function(e) {
        $(".table tbody tr").each(function(index, element) {
            if ($(this).find(":checkbox:checked").length == 0)
                $(this).addClass("selectedStyle");
        });
    });
});

UPDATED FIDDLE

Answer 5

Answer №3

To achieve this, you can loop through the tr elements and perform the necessary actions while checking the input elements within them.

$(function(){
    $('#callScr').on('click', function(e){
       $( ".table tr:gt(1)" ).each(function(i, obj) {
          if($(this).find('input:checked').length===0)
             $(this).addClass( "yourClass" );
       });
    });
});

Check out this JS Fiddle link for further details

Answer 6

To achieve this, you can loop through the tr elements and perform the necessary actions while checking the input elements within them.

$(function(){
    $('#callScr').on('click', function(e){
       $( ".table tr:gt(1)" ).each(function(i, obj) {
          if($(this).find('input:checked').length===0)
             $(this).addClass( "yourClass" );
       });
    });
});

Check out this JS Fiddle link for further details

If checkboxes are found within the table's rows and cells, add the parent row class if none of the

Answer №1

Answer №2

UPDATED FIDDLE

Answer №3

Similar questions

Is there a way to connect an HTML page without using a hyperlink?

Tips for retrieving and displaying values from a form using only PHP

Close popup after submitting the form

Sending jQuery events from an aspx page to an ascx control

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

Pause until the existence of document.body is confirmed

Missing table header in HTML causing table to not display correctly

Is there a way to add 100 headings to a webpage without using a loop when the page loads

Tips for displaying a Bootstrap 4 table on smaller screens

Issue encountered in SQL PHP form script at line 23

Surprising outcome from the glob-fs glob.readdirSync function

stop automatic resizing of windows

Refining to Showcase One Menu Selection

What is the best way to display a child component inside an iframe using Vue.js?

Applying CSS link dynamically in NextJS based on the window width

What is the best approach for sending a binary image post request to an API using nodejs?

Leverage node rework CSS directly within your browser for seamless website

Adding a timestamp to the src URL in HTML: A step-by-step guide

What is the best way to compare two times in the hh:mm AM/PM format?

Tips for utilizing multiple ngFor directives for property binding within a single directive