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
– Naga Sai A, Commented Jun 20, 2018 at 19:35

Vương Hữu Thiện · Accepted Answer · 2021-09-30 17:11:40Z

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, 2021 at 17:11

Vương Hữu Thiện

1,7281 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Intervalia · Accepted Answer · 2018-06-20 21:43:56Z

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>

wade king · Accepted Answer · 2018-06-20 19:37:19Z

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, 2018 at 19:37

wade king

3734 silver badges14 bronze badges

Comments

Radek Krajewski · Accepted Answer · 2018-06-20 19:43:28Z

0

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>

answered Jun 20, 2018 at 19:43

Radek Krajewski

463 bronze badges

2 Comments

meekz89 Over a year ago

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.

Radek Krajewski Over a year ago

There's no way that this will work - id="checkbox'+(counter)+'".

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related