Change the background color of a checkbox with jQuery by toggling it

Question

Change the background color of a checkbox with jQuery by toggling it

I'm currently utilizing the Bootstrap Tree to generate a nested checkbox list (). However, I am looking to enhance the user experience by highlighting the checked items, and ensuring that when a parent is selected, its children are also highlighted. While I've made some progress with this functionality, I've encountered an issue where the background-color of individual child items won't toggle correctly when unchecked. It seems to only work when the parent item is not selected.

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);

        $(this).parent('li').toggleClass("highlight");

    });
});

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Your code has been modified and can be viewed in a new fiddle: https://jsfiddle.net/pjrzbbea/.

A separate highlight class has been added for the child elements, with a background color that overlaps the parent's background color. The JavaScript now removes the highlight class from child elements when the parent element is highlighted, ensuring correct resetting of children.

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
        var highlightChildClass = 'highlightChild';

        $(this).siblings('ul')
            .find('li')
            .removeClass(highlightChildClass)
            .find("input[type='checkbox']")
            .prop('checked', this.checked);

        var highlightClass = 'highlight';

        if ($(this).closest('ul[role="group"]').length > 0) {
            highlightClass = highlightChildClass;
        } 

        $(this).parent('li').toggleClass(highlightClass);
    });
});

Answer 2

Your code has been modified and can be viewed in a new fiddle: https://jsfiddle.net/pjrzbbea/.

A separate highlight class has been added for the child elements, with a background color that overlaps the parent's background color. The JavaScript now removes the highlight class from child elements when the parent element is highlighted, ensuring correct resetting of children.

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
        var highlightChildClass = 'highlightChild';

        $(this).siblings('ul')
            .find('li')
            .removeClass(highlightChildClass)
            .find("input[type='checkbox']")
            .prop('checked', this.checked);

        var highlightClass = 'highlight';

        if ($(this).closest('ul[role="group"]').length > 0) {
            highlightClass = highlightChildClass;
        } 

        $(this).parent('li').toggleClass(highlightClass);
    });
});

Answer 3

Answer №2

If you have multiple sources that can change the background, toggling the class may not work as expected. It's important to clean up the children when changing the parent element. Below is a modified version of the sample code provided. https://jsfiddle.net/wgpahro4/

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('ul')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);

    //ADDED CODE STARTS HERE!!!!!!!!!!!
    //Clean up children
    if($(this).parent().hasClass("parent_li")){
        if(!this.checked){
           $(this).siblings("ul").find("li").removeClass("highlight");
        }
    }
    //ADDED CODE ENDS HERE!!!!!  

    $(this).parent('li').toggleClass("highlight");

    });
});

Answer 4

If you have multiple sources that can change the background, toggling the class may not work as expected. It's important to clean up the children when changing the parent element. Below is a modified version of the sample code provided. https://jsfiddle.net/wgpahro4/

$(function checkbox() {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('ul')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);

    //ADDED CODE STARTS HERE!!!!!!!!!!!
    //Clean up children
    if($(this).parent().hasClass("parent_li")){
        if(!this.checked){
           $(this).siblings("ul").find("li").removeClass("highlight");
        }
    }
    //ADDED CODE ENDS HERE!!!!!  

    $(this).parent('li').toggleClass("highlight");

    });
});

Answer 5

Answer №3

To achieve the desired behavior of having each child checkbox highlight while still allowing the parent checkbox to override, you can use a code snippet like the following:

$(function checkHighlight() {
    $("input[type='checkbox']").change(function () {

        if ($(this).siblings('ul').length > 0) {
            var children = $(this).siblings('ul').find('input');
            children.prop('checked', this.checked).change();
        }
        else {
            var item = $(this).parent('li');
            this.checked ? item.addClass('highlight') : item.removeClass('highlight');
        }
    });
});

Answer 6

To achieve the desired behavior of having each child checkbox highlight while still allowing the parent checkbox to override, you can use a code snippet like the following:

$(function checkHighlight() {
    $("input[type='checkbox']").change(function () {

        if ($(this).siblings('ul').length > 0) {
            var children = $(this).siblings('ul').find('input');
            children.prop('checked', this.checked).change();
        }
        else {
            var item = $(this).parent('li');
            this.checked ? item.addClass('highlight') : item.removeClass('highlight');
        }
    });
});

Change the background color of a checkbox with jQuery by toggling it

Answer №1

Answer №2

Answer №3

Similar questions

The primefaces remoteCommand tag is failing to function properly as it is unable to pass the HTML content of the current page using jQuery to the managed

Error with the mongo (1.4.4) query

The CSS styles are not being applied to the header and footer sections in the PDF file created with

Looking to extract data from an HTML form?

Tips for preventing curved links in a radial tree diagram created with d3

Display the HTML tag inside a cell of a mat-table

Tips for choosing a sibling element on hover using CSS

Retrieve dynamic data for Pivot in Devexpress AngularJS

Express 4 app.use not functioning properly

Combining multiple dictionaries into one single dictionary array using JavaScript

How to resize and center an image within a div element as they both scale proportionally

Safari not properly adjusting height of bootstrap cards within column in row

What is required to run npm rebuild node-sass --force following each instance of a `yarn add` command?

guide on launching react with pure javascript

arranging data in various categories with React.js

QUnit and a troubleshooting JSONP situation

Encountering a Console warning while working with the Material UI menu. Seeking advice on how to resolve this issue as I am integrating HTML within a text

Tips for setting the active tab in AngularJS with validation included

I seem to be stuck trying to figure out what's going wrong when receiving JSON data

Encountering the error message "Unable to access /" on the browser when using express router