Check Box is a another most useful input field of html form ,using it select single or multiple option at a time just like selecting list of grocery item, selecting number of hobbies its a easy task implementing it but some time it have some difficulties the time of implement on image using html form and css with proper validation and short code.
Here the example of the multiple image selector with check box with html form tag.
In below code have a form with five input field type radio button and it select one or more image at time like property of checkBox.
And Implemented it with two dummy images.
html form (index.php)
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-xs-4 col-sm-3 col-md-2 CheckBoxPadiing text-center">
<label class="image_checkbox">
<img class="img-responsive" src="https://images.pexels.com/photos/236230/pexels-photo-236230.jpeg" />
<input type="checkbox" name="checkBox[]" value="" />
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 CheckBoxPadiing text-center">
<label class="image_checkbox">
<img class="img-responsive" src="https://images.pexels.com/photos/236230/pexels-photo-236230.jpeg" />
<input type="checkbox" name="checkBox[]" value="" />
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 CheckBoxPadiing text-center">
<label class="image_checkbox">
<img class="img-responsive" src="https://images.pexels.com/photos/236230/pexels-photo-236230.jpeg" />
<input type="checkbox" name="checkBox[]" value="" />
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 CheckBoxPadiing text-center">
<label class="image_checkbox">
<img class="img-responsive" src="https://images.pexels.com/photos/236230/pexels-photo-236230.jpeg" />
<input type="checkbox" name="checkBox[]" value="" />
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 CheckBoxPadiing text-center">
<label class="image_checkbox">
<img class="img-responsive" src="https://images.pexels.com/photos/236230/pexels-photo-236230.jpeg" />
<input type="checkbox" name="checkBox[]" value="" />
</label>
</div>
</div>
<script>
$(".image_checkbox").on("click", function (e) {
$(this).toggleClass('image_checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
$(".image_checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image_checkbox-checked');
}
else {
$(this).removeClass('image_checkbox-checked');
}
});
</script>
</body>
</html>
Css File (style.css)
.CheckBoxPadiing {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image_checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image_checkbox input[type="checkbox"] {
display: none;
}
.image_checkbox-checked {
border-color: #0a76c7;
}
.image_checkbox .fa {
position: absolute;
color: #0a76c7;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image_checkbox-checked .fa {
display: block !important;
}
Result
Hello, My Name is pradip parker . I am a Web Developer, Professional Blogger from India. i love and like web designing and developing, i have two year of experience in programming and developing I am the founder of programmingconcept. I started this blog in 2017 to for help developers by providing easy,small and best tutorials.
Howdy! This is my first comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your blog posts. Can you suggest any other blogs/websites/forums that deal with the same subjects? Thank you so much!
Hi there! I’m at work browsing your blog from my new iphone! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the great work!
Appreciating the time and energy you put into your website and detailed information you offer. It’s great to come across a blog every once in a while that isn’t the same old rehashed material. Wonderful read! I’ve saved your site and I’m adding your RSS feeds to my Google account.
Hmm it appears like your site ate my first comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog writer but I’m still new to the whole thing. Do you have any tips for beginner blog writers? I’d certainly appreciate it.
Sweet blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it
Do you mind if I quote a few of your posts as long as I provide credit and sources back to your webpage: %BLOGURL%. I am going to aslo be certain to give you the appropriate anchortext hyperlink using your blog title: %BLOGTITLE%. Please let me know if this is ok with you. Thanks alot 🙂
ok you can..
It seems that I did well to come back again.This blog seems to have a lot of information.Always ask for good information.
Hi there! I know this is kind of off topic but I was wondering which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.