Emphasize the checkbox

Question

Emphasize the checkbox

In my table, I have radio buttons that should turn the neighboring cell green when clicked. Using JQuery, I added a "highlight" class on $.change event to achieve this effect.

However, I encountered an issue where some radio buttons load with the "checked" attribute already set. How can I use JQuery to find all radio button elements with the "checked" attribute upon page load? Below is my attempt, which doesn't seem to work as expected.

JQUERY

$('input:radio').ready(function() {
    if($(this).is(':checked')){
        $(this).parent().addClass('highlight');
        var $td = $(this).parent();
        $td.siblings().removeClass('highlight');
        $td.next().addClass('highlight');
    }   
});

CSS

#sort td.highlight {background: #33FF99;}

jquery css highlight

Answer 1

Answer №1

To iterate over all the radio buttons, utilize the each method:

$(document).ready(function(){
    $('input:radio').each(function(index, element) {
        if($(element).is(':checked')){
            $(element).parent().addClass('highlight');
            var $td = $(element).parent();
            $td.siblings().removeClass('highlight');
            $td.next().addClass('highlight');
        }
    });
});

Answer 2

To iterate over all the radio buttons, utilize the each method:

$(document).ready(function(){
    $('input:radio').each(function(index, element) {
        if($(element).is(':checked')){
            $(element).parent().addClass('highlight');
            var $td = $(element).parent();
            $td.siblings().removeClass('highlight');
            $td.next().addClass('highlight');
        }
    });
});

Answer 3

Answer №2

To enhance the visibility of the next cell in a table, consider creating a utility function specifically for highlighting. This function can be called on document.ready for each radio button in the table, as well as on the change event of each radio button.

An example implementation could look something like this:

Demo Fiddle: http://jsfiddle.net/abhitalks/tee56wz0/

Demo Snippet:

$("input[type=radio]").each(function() {
    setHighlight(this);  // calling the utility function for each radio on document.ready
});

$("input[type=radio]").on("change", function() {
    setHighlight(this);  // calling the utility function for each radio on change
});

function setHighlight(elem) {
    if (elem.checked) {  
        $("table td").removeClass('highlight');        
        $(elem).parent().next().addClass("highlight"); 
    }
}

td.highlight {background: #33FF99;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

Answer 4

To enhance the visibility of the next cell in a table, consider creating a utility function specifically for highlighting. This function can be called on document.ready for each radio button in the table, as well as on the change event of each radio button.

An example implementation could look something like this:

Demo Fiddle: http://jsfiddle.net/abhitalks/tee56wz0/

Demo Snippet:

$("input[type=radio]").each(function() {
    setHighlight(this);  // calling the utility function for each radio on document.ready
});

$("input[type=radio]").on("change", function() {
    setHighlight(this);  // calling the utility function for each radio on change
});

function setHighlight(elem) {
    if (elem.checked) {  
        $("table td").removeClass('highlight');        
        $(elem).parent().next().addClass("highlight"); 
    }
}

td.highlight {background: #33FF99;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

Answer 5

Answer №3

$(document).ready(function () {
    var checkedRadio = $('input:radio:checked');

    if (checkedRadio.is(':checked')) {
        $(checkedRadio).parent('td').addClass('highlight');
    }

    $('input:radio').on('change', function () {
        $('#sort td').removeClass('highlight');
        $(this).parent('td').addClass('highlight');
    });
});

example - http://jsfiddle.net/cn073npq/2/

Answer 6

$(document).ready(function () {
    var checkedRadio = $('input:radio:checked');

    if (checkedRadio.is(':checked')) {
        $(checkedRadio).parent('td').addClass('highlight');
    }

    $('input:radio').on('change', function () {
        $('#sort td').removeClass('highlight');
        $(this).parent('td').addClass('highlight');
    });
});

example - http://jsfiddle.net/cn073npq/2/

Answer 7

Answer №4

If you need to create a common click event for radio buttons that will add a specific class to the immediate next td/div element, you can use the following jQuery code:

$("input[type=radio]").on("click", function() {
    $("td").removeClass("active");
    $(this).parent().next().addClass("active");
});

For example, if your HTML code looks like this:

<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

You can then style the added class using CSS:

.active {background: #00FF00;}

Answer 8

If you need to create a common click event for radio buttons that will add a specific class to the immediate next td/div element, you can use the following jQuery code:

$("input[type=radio]").on("click", function() {
    $("td").removeClass("active");
    $(this).parent().next().addClass("active");
});

For example, if your HTML code looks like this:

<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

You can then style the added class using CSS:

.active {background: #00FF00;}

Emphasize the checkbox

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for revealing a hidden HTML tag

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

Discover the power of uploading images using HTML5 with PHP

Issue detected: Click event for Backbone not properly registered

The functionality of `config.assets.debug = true` fails to

Sending jQuery variables to PHP

Ways to address the issue of "$ is not a function"

Mastering the correct application of flex properties within nested flex containers

Is there a way to upload files in AngularJS without using AJAX or jQuery?

Sorting JSON data using JQuery Ajax

JQuery functions for click and hover are not functioning as expected on a div element

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Refresh a div on an ASP MVC page with a controller action without the need to reload the entire page

Issue with PrimeNG Carousel width on mobile devices

Assigning a unique identifier to a button that will vary depending on the selected radio input

A guide on organizing dates in a datatable using the dd-MMM-yyyy hh:mm tt format

Empty observables in Knockout ViewModel binding

Press on a circle to adjust its size to fit the section or division

The table is too large for the parent div in which it is placed, causing

What methods can I use to gauge the loading time of an AJAX request and showcase a loading panel?