Add css If checkbox checked?

Question

Im using a data-attribute from an input checkbox to add a background image to the element #checkbox1 if the checkbox is checked.

What does I have to do with this function to hide the background image if the checkbox is not checked.

HTML

<div id="checkbox1"></div>

<input data-image="url(http://www.siwikultur.de/kulturpur/wp-content/uploads/2009/03/schneider.jpg)" type="checkbox" id="check1">
<label for="check1">USB-Stick-Halterung</label>

Jquery

<script> 
$('#check1').on('change', function () {
$("#checkbox1").css("background-image", ($('#check1:checked').data("image")));
});  
</script>

If you could put the checkbox before your div you can do it with just CSS. — putvande
– putvande, Commented Feb 28, 2015 at 19:16

Marwelln · Accepted Answer · 2015-02-28 18:02:16Z

3

Check if the button is checked with the checked property. If it is, display the image, if it's not, set background-image to none.

$('#check1').on('change', function () {
    $("#checkbox1").css("background-image", this.checked ? this.dataset.image : 'none');
});

answered Feb 28, 2015 at 18:02

Marwelln

29.5k21 gold badges97 silver badges120 bronze badges

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

Collectives™ on Stack Overflow

Add css If checkbox checked?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related