custom checkbox is not being marked as checked

Question

custom checkbox is not being marked as checked

I've been attempting to customize my checkboxes, following various tutorials without success. Despite trying multiple methods, I still can't get the checkboxes to check or uncheck.

Here is the code I have so far: https://jsfiddle.net/NecroSyri/behgLox0/10/

My implementation includes vanilla CSS and HTML, with some unrelated JS that I have commented out just in case, but it has not made a difference.

redrawCheckboxes(); //this function creates elements to replace the checkboxes, but nothing happens after that

If anyone knows why clicking the checkboxes does not result in them getting checked or unchecked, I would appreciate any insights. Thanks!

javascript html css

Answer 1

Answer №1

After some exploration, I stumbled upon a new method to modify the checkbox design without having to create it from scratch:

https://jsfiddle.net/UniqueCoder/designing-checkboxes/8/

The key code snippet can be found below:

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;

Answer 2

After some exploration, I stumbled upon a new method to modify the checkbox design without having to create it from scratch:

https://jsfiddle.net/UniqueCoder/designing-checkboxes/8/

The key code snippet can be found below:

-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;

Answer 3

Answer №2

After reviewing your jsFiddle, I decided to experiment with a few things.

I made some modifications in your CSS by commenting out certain lines:

.tree input[type=checkbox] {
  display: none;
}

This helped me understand how the checkboxes were linked to your custom ones.

I noticed that clicking on the original checkbox would affect the custom ones, but not vice versa. It seems like there is no onClick listener in your JS code. However, as a beginner in Vanilla JavaScript, I may have overlooked something.

In my opinion, you could consider adding the following code snippet to your redraw() method:

function redrawCheckboxes(){
document.querySelectorAll('.tree input[type="checkbox"]').forEach(function(cbox){
    var cmark = document.createElement('i');
    var newbox = cbox;
    var parentElem = cbox.parentElement;
    parentElem.prepend(cmark);
    parentElem.prepend(newbox);
    cmark.classList.add('checkmark');
    cmark.addEventListener("click", function(e) {
        cmark.previousElementSibling.checked = !cmark.previousElementSibling.checked;
    });
});

}

I believe you can find a way to optimize these last three lines of code. Nevertheless, this solution should do the trick.

Keep up the good work!

Answer 4

After reviewing your jsFiddle, I decided to experiment with a few things.

I made some modifications in your CSS by commenting out certain lines:

.tree input[type=checkbox] {
  display: none;
}

This helped me understand how the checkboxes were linked to your custom ones.

I noticed that clicking on the original checkbox would affect the custom ones, but not vice versa. It seems like there is no onClick listener in your JS code. However, as a beginner in Vanilla JavaScript, I may have overlooked something.

In my opinion, you could consider adding the following code snippet to your redraw() method:

function redrawCheckboxes(){
document.querySelectorAll('.tree input[type="checkbox"]').forEach(function(cbox){
    var cmark = document.createElement('i');
    var newbox = cbox;
    var parentElem = cbox.parentElement;
    parentElem.prepend(cmark);
    parentElem.prepend(newbox);
    cmark.classList.add('checkmark');
    cmark.addEventListener("click", function(e) {
        cmark.previousElementSibling.checked = !cmark.previousElementSibling.checked;
    });
});

}

I believe you can find a way to optimize these last three lines of code. Nevertheless, this solution should do the trick.

Keep up the good work!

custom checkbox is not being marked as checked

Answer №1

Answer №2

Similar questions

What is the reason position:sticky does not align elements to right:0?

Unable to access res.name due to subscription in Angular

Tips for Resolving React.js Issues with setInterval

Click to reveal sliding menu bar

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

The functionality of the onclick button input is not functioning properly in the Google

When using Inertia.js with Laravel, a blank page is displayed on mobile devices

Scrollbar appearing in Safari (Windows) despite increasing the height

Encountering connectivity issues with MongoDB client and struggling to insert data while utilizing promises

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

Adjusting firebugx.js for compatibility with Internet Explorer Developer Tools

There was an error while parsing JSON on line 1, where it was expecting either a '{' or '[' to start the input

Guide on retrieving the mouse button press from a command event using XUL

Retrieving information from controller to HTML page in AngularJS

Update the CAPTCHA, while also refreshing the entire registration form

Is there a way to retrieve a raw value from the API response that matches the one shown in POSTMAN, but my attempts have been unsuccessful?

Issue with Empty Date Time Format in Vue2 Date-Picker

Retrieving XML using JavaScript with AJAX

iterating over a large multidimensional array in JavaScript

The issue of memory leakage with ng-grid and real-time data