Multi Image Selection Using CheckBox

Multi Image Selection Using CheckBox

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

9 Replies to “Multi Image Selection Using CheckBox”

  1. 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!

  2. 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.

  3. 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.

  4. 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 🙂

  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *