Hide HTML checkbox, but keep function when using a custom image checkbox

Question

I want to use images to create a custom checkbox. I know how to do this, and there are a lot of great alternatives on this site. But my number one goal here is learning so I would like to ask this question. When I hide the HTML checkbox with CSS using display: none; the jquery code doesn't work anymore. And that makes sense to me, but how can I make it so the custom checkbox with the images also functions like the original one?

HTML

<div id="togglecontainer">
    <input type="checkbox" id="checkbox'+(counter)+'"class="item"/>
    <label for="checkbox"></label>
    <input value="make me bold" type="text" class="inputfield"/>
</div>

CSS

.inputfield{
    padding-left: 20px;
}

label:before {
    content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
    position: absolute;
    z-index: 100;
}

input[type=checkbox]:checked+label:before {
    content:url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}

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

.complete { 
    font-weight: bold;
}

input[type=text] {
    background-color:transparent;
    border: 0px solid;
    margin-left: 20px;
    color:#222222;
    font-size: 13px;
}

jQuery

$("#togglecontainer").delegate("input[type=checkbox]", "change", function () {
    $(this).nextAll().toggleClass("complete");
});

jsfiddle

P.s. A little side question; as you can see this fiddle uses an older version of jQuery. When I link to a newer version the whole thing doesn't work anymore. Can someone elaborate on that a little as well?

Thanks in advance.

use visibility:none instead of display:none.... as visibility:hidden will make that the element is available on DOM and it is hidden — Naga Sai A, Jun 20 '18 at 19:35

score 1 · Answer 1 · answered Sep 30 '21 at 17:11

1

You can use a "label" tag that contains an "img" tag inside.

I have the answer at this link:

https://stackoverflow.com/a/69395887/12569619

answered Sep 30 '21 at 17:11

Vương Hữu Thiện

1,460
14
21

score 0 · Answer 2 · answered Jun 20 '18 at 19:37

0

use opacity:0; instead of display:none; the checkbox will still be there and you can click on it but you can't see it

answered Jun 20 '18 at 19:37

wade king

353
4
14

score 0 · Answer 3 · answered Jun 20 '18 at 19:43

There is a wrong id attribute in checkbox so clicking in label is not calling change in checkbox.

Just try maching "for" attribute in label with "id" attribute in input (checkbox).

 $("#togglecontainer").delegate("input[type=checkbox]", "change", function () {
        $(this).nextAll().toggleClass("complete");
    });

.inputfield{
padding-left: 20px;


}
label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
  position: absolute;
  z-index: 100;
}

input[type=checkbox]:checked+label:before {
  content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}

input[type=checkbox] {

}

.complete { 
font-weight: bold;
}

input[type=text] {
background-color:transparent;
border: 0px solid;
margin-left: 20px;
color:#222222;
font-style:oblique;
font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="togglecontainer">
<input type="checkbox" id="checkbox" class="item" style="display: none"/>
<label for="checkbox"></label>
<input value="make me bold" type="text" class="inputfield"/>
</div>

thank you very much. The thing is,... I do need the counter for the ID's because of another function. Because the checkboxes will be generated with an append button. Sorry for not pointing that out. — meekz89, Jun 20 '18 at 20:36
There's no way that this will work - `id="checkbox'+(counter)+'"`. — Radek Krajewski, Jun 20 '18 at 20:50

score 0 · Accepted Answer · answered Jun 20 '18 at 21:43

You can always wrap the checkbox inside the label and then not need the id or the for.

My example does not use images. I don't need id or for and if you click on the text it also works.

I did make the text into just text and no longer an <input type="text"> field.

I also re-wrote the code in vanilla JS and not using jQuery. This will still work with jQuery in the rest of your code, bit it will also work without jQuery.

var el = document.querySelector("#togglecontainer");
el.addEventListener("change", evt => {
  if (evt.target.type === "checkbox") {
    evt.target.parentNode.classList.toggle("checked", evt.target.checked);
    evt.preventDefault();
  }
});

.my-checkbox:before {
  content: '';
  height: 20px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 3px;
  vertical-align: middle;
  width: 20px;
  text-align: center;
}

.my-checkbox.checked {
  font-weight: bold;
}

.my-checkbox.checked:before {
  content: '✓';
}

.my-checkbox [type=checkbox] {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  display: none;
}

<div id="togglecontainer">
  <label class="my-checkbox">
    <input type="checkbox"/>
    make me bold
  </label>
</div>

Hide HTML checkbox, but keep function when using a custom image checkbox

4 Answers4