How can I display the checkbox over the images for selection?
This can be done with pure CSS, assuming you have fixed width and height for all images. The trick is setting absolute position for the checkbox then assign bottom
and right
to zero.
HTML sample:
<div class="container">
<img src="image1.jpg" />
<input type="checkbox" class="checkbox" id="check1" />
</div>
<div class="container">
<img src="image2.jpg" />
<input type="checkbox" class="checkbox" id="check2" />
</div>
CSS:
.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }
Live test case.
As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.
Show image based on checkbox selection
This is one way to do it below, but you logic doesn't make sense... you only have 9
checkboxes so 'third image' === 7 - 9
and 'fourth image' === 'all selected'
will overlap.
i.e. this case...
} else if (selected.length === images.length) {
hideImagesExcept(3)
}
will never be called.
$(document).ready(function (){ var options = $('input.js-toggler'), images = $('.js-toggle-image');
$('input').click(function() { var category = $(this).val(); if (!$(this).attr('checked')) $('.' + category).hide(); else $('.' + category).show();
var selected = options.filter(function(){ return this.checked === true; })
if (selected.length === 0) { images.hide(); } else if (selected.length > 0 && selected.length < 4) { hideImagesExcept(0) } else if (selected.length > 3 && selected.length < 7) { hideImagesExcept(1) } else if (selected.length > 6 && selected.length < 10) { hideImagesExcept(2) } else if (selected.length === images.length) { hideImagesExcept(3) } });
function hideImagesExcept(index) { var hideThese = images.filter(function (){ return images.eq(this) !== index }) hideThese.hide() images.eq(index).show() }})
.categorya, .categoryb, .categoryc, .categoryd, .categorye, .categoryf, .categoryg, .categoryh, .categoryi { display:none; font-size:13px; color:#000000; font-family:sans-serif;}.js-toggle-image { display:none;}p.info{ padding:30px 20px 0 20px; color:#000; font-family:sans-serif; font-size:13px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya"> <label for="filter-categorya">Category A</label><br><input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb"><label for="filter-categoryb">Category B</label><br><input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc"><label for="filter-categoryc">Category C</label><br><input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd"><label for="filter-categoryd">Category D</label><br><input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye"><label for="filter-categorye">Category E</label><br><input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf"><label for="filter-categoryf">Category F</label><br><input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg"><label for="filter-categoryg">Category G</label><br><input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh"><label for="filter-categoryh">Category H</label><br><input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi"><label for="filter-categoryi">Category I</label><div class="categorya">A</div><div class="categoryb">B</div><div class="categoryc">C</div><div class="categoryd">D</div><div class="categorye">E</div><div class="categoryf">F</div><div class="categoryg">G</div><div class="categoryh">H</div><div class="categoryi">I</div> <p class="info">- If you select 1-3 boxes = show first image. If you select 4-6 = second image. If you select 7-9 = third image. If you select all of them = fourth image.</p><br>
<h1>Images:</h1>
<div> <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[]" src="http://dummyimage.com/600x400/000/fff&text=First+image"> <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[1]" src="http://dummyimage.com/600x400/000/fff&text=Second+image"> <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[2]" src="http://dummyimage.com/600x400/000/fff&text=Third+image"> <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[1,2]" src="http://dummyimage.com/600x400/000/fff&text=Fourth+image"></div>
Easiest way to display a check mark over image when a checkbox input is selected?
Just add a label next to the checkbox and map it to the checkbox using id-for mapping. In css we will give the style to the label whenever the checkbox is checked using :checked
selector. You can put you image in the label.
.categories-wrapper { position: relative;}.category-input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%;}.category-input:checked + label{background:red; /* put your image here*/ height: 50px; width: 50px; position: absolute; top:0; left:0;}
<div class="categories-wrapper"> <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' /> <input class='category-input' type="checkbox" id='checker' name="categories[]" value=""> <label for="checker"></label> <input type="hidden" name="categoryFiles[]" value=""></div>
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>
Using image for checkbox input
Add Border for img with transparent
label img {
height: 100%;
width: 100%;
border: 1px solid transparent;
}
https://codepen.io/anon/pen/PVRxRM
How to display image in place of checkbox?
Here is an example, done with a little jQuery and CSS: DEMO
$(".checkbox").click(function() {
$(this).toggleClass('checked')
});
.checkbox {
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked {
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="checkbox">
</div>
How to make checkboxes with images
This is how you can simulate an image based checkbox using a label
input { display: none}
/* switch image */label[for="chk1"] { display: inline-block; text-align: center; width: 100px; height: 100px; border: 2px solid black; background: url(http://placehold.it/100/f00);}#chk1:checked ~ label[for="chk1"] { background: url(http://placehold.it/100/ff0);}
/* add content */label[for="chk2"] { display: inline-block; text-align: center; width: 100px; height: 100px; border: 2px solid black; position: relative;}#chk2:checked ~ label[for="chk2"]::after { content: 'V'; position: absolute; left: 0; right: 0; font-size: 90px; font-weight: bold; font-family: arial;}
<input id="chk1" type="checkbox"><input id="chk2" type="checkbox">
<label for="chk1"></label><label for="chk2"></label>
<div>Click a box to toggle it</div>
Using javascript and html to show images when checkboxes are checked
Here's a quick example to get you started. You can see it in action here.
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
<img id="imgpopulation" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden" />
Related Topics
Why Media Queries Has Less Priority Than No Media Queries Css
How to Style Part of an Input Field'S Value
Firefox Linux (Centos) Responsive Design Image Scaling
Youtube Embedded Video: Autoplay Feature Not Working in Iphone
How to Go Up a Level in the Src Path of a Url in HTML
How to Center an Unordered List
Text-Overflow: Ellipsis Not Working
Elongated Hexagon Shaped Button Using Only One Element
Position an Element Relative to Its Container
Hide Textfield Blinking Cursor
Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height
How to Use Text-Overflow:Ellipsis on Multiline Text
Font Awesome Icon Inside Text Input Element