Change Checkbox Check Image to Custom Image

Change checkbox check image to custom image

Try:

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle:
http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){

    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){

    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))

});

.class_checkbox {

    width: 20px;  

    height: 20px;

    background-color: red;

}

.class_checkbox.checked {

    background-color: green;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="input_class_checkbox">

Change checkbox image when checked

Since you are not directly clicking on the input you can't use click. What you click on however is the label. The label then changes the input value. So instead of click change it to .. you guessed it, .change()

The next step is to change the image. The problem here is that you changed the src attribute of the input instead of the img element... so first we need to get the img element and change the src.

$("#blackjack").change(function () {

    if ($(this).is(':checked')) 

        $(this).prev().find('img').attr('src', 'http://i.stack.imgur.com/J6dkP.gif');

    else

       $(this).prev().find('img').attr('src', 'http://i.imgur.com/kfMWC91.jpg');

});

input[type=checkbox] {

    display: none;

}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form method="post" action="recap.php">

    <p>Cliquez sur les icônes des jeux que vous souhaitez:

        <br>

        <p>

            <label for="blackjack">

                <img src="http://i.imgur.com/kfMWC91.jpg" alt="Sample Image">

            </label>

        </p>

        <INPUT id="blackjack" type="checkbox" value="Blackjack" />

</form>

Use images like checkboxes

Pure semantic HTML/CSS solution

This is easy to implement on your own, no pre-made solution necessary. Also it will teach you a lot as you don't seem too easy with CSS.

This is what you need to do:

Your checkboxes need to have distinct id attributes. This allows you to connect a <label> to it, using the label's for-attribute.

Example:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

Attaching the label to the checkbox will trigger a browser behaviour: Whenever someone clicks the label (or the image inside it), the checkbox will be toggled.

Next, you hide the checkbox by applying for example display: none; to it.

Now all that is left to do is set the style you want for your label::before pseudo element (which will be used as the visual checkbox replacement elements):

label::before {
    background-image: url(../path/to/unchecked.png);
}

In a last tricky step, you make use of CSS' :checked pseudo selector to change the image when the checkbox is checked:

:checked + label::before {
    background-image: url(../path/to/checked.png);
}

The + (adjacent sibling selector) makes sure you only change labels that directly follow the hidden checkbox in the markup.

You can optimize that by putting both images in a spritemap and only applying a change in background-position instead of swapping the image.

Of course you need to position the label correctly and apply display: block; and set correct width and height.

Edit:

The codepen example and snippet, which I created after these instructions, use the same technique, but instead of using images for the checkboxes, the checkbox replacements are done purely with CSS, creating a ::before on the label that, once checked, has content: "✓";. Add some rounded borders and sweet transitions and the result is really likable!

Here is a working codepen that showcases the technique and doesn't require images for the checkbox:

http://codepen.io/anon/pen/wadwpx

Here is the same code in a snippet:

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

css - replacing checkbox image

It picks up the checked image when the checkbox is checked. Issue you have is the fact nothing is clickable to make the checkbox checked.

Move the AM/PM into the label and use padding to shove it over instead of the spaces.

HTML:

<div class="amPmCheckbox">
    <input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
    <label for="am_2">AM</label>
</div>

CSS:

.amPmCheckbox input[type="checkbox"] {
    display: none;
}
.amPmCheckbox input[type="checkbox"]+label {    
    background: url('http://renegadeox.com/img/off.png') no-repeat;
    height:17px;
    padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
    background: url('http://renegadeox.com/img/on.png')  no-repeat;
    height:17px;
}

http://jsfiddle.net/JkDhN/1/

Styling Custom Checkbox with Image Not Appearing

Try this.

ul{

  list-style:none;

}

input[type="checkbox"] {

  opacity: 0;

  position: absolute;

  width: 100%;

  height: 100%;

  z-index: -1;

}

input[type="checkbox"] + label {

  background: url(https://i.stack.imgur.com/eiFBl.png) no-repeat 0 center;

  padding-left:60px;

  line-height:50px;

  display: inline-block;

  cursor:pointer;

}

input[type="checkbox"]:checked + label {

  background: url(https://i.stack.imgur.com/mCst2.png) no-repeat 0 center; 

}

.check-wrap{

  position:relative;

  display: inline-block;

}

<ul id="myUL" class="ulChecklist">

  <form action="/action_page.php">

    <li>

      <div class="check-wrap">

        <input type="checkbox" name="instruction" id="Step1">

        <label for="Step1">Step 1</label>

      </div>

    </li>

    <li>

      <div class="check-wrap">

        <input type="checkbox" name="instruction" id="Step2">

        <label for="Step2">Step 2</label>

      </div>

    </li>

    <li>

      <div class="check-wrap">

        <input type="checkbox" name="instruction" id="Step3">

        <label for="Step3">Step 3</label>

      </div>

    </li>

  </form>

</ul>

Set custom image to checkbox without mandatory label

The only way I've found that works everywhere except IE is via setting CSS appearance:

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

Pure CSS checkbox image replacement

You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label

Complete Code: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

Image and text change on checkbox checked and revert back

You can put condition like that if checkbox is checked then replace image/text with you want and if unchecked replace it with original.

$("#link_checkbox").click(function () {
    if ($(this).is(":checked")) {
        $(".result_text").text("Inserts the contents of the file into your document and creates a shortcut to the source file.Changes to the source file will be reflected in your document.");
        $('#picture').attr('src', 'image/result1.png');
    } else {
        $(".result_text").text("Original text you want to add");
        $('#picture').attr('src', 'image/original-file.png');
    }
});

---

Related Topics