Checkbox enabled Bootstrap image

I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it.

After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem to function as expected when running it on my localhost.

Here is the HTML code:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <h3>Bootstrap image checkbox(multiple)</h3>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  (more similar blocks of code follow...)

Below is the CSS code:

.nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
(image gallery styling also included...)

The JavaScript code snippet employed:

(JS functionality described with examples...)

Intended design appearance: codepen

Current outcome observed: results

The checkboxes are unresponsive and the positioning appears incorrect, as apparent from the results provided.

Facing obstacles as a beginner, I seek assistance in pinpointing the error on my end.

Your guidance and expertise will be immensely appreciated.

javascripthtmlcss

Answer №1

It appears that you may have missed some essential CSS and jQuery elements in your example. Make sure to include the necessary components for a complete implementation.

    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="robots" content="noindex">        
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
            <style class="cp-pen-styles">.nopad {
                    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: #4783B0;
                }
                .image-checkbox .fa {
                    position: absolute;
                    color: #4A79A3;
                    background-color: #fff;
                    padding: 10px;
                    top: 0;
                    right: 0;
                }
                .image-checkbox-checked .fa {
                    display: block !important;
                }</style></head><body>
            <!-- 
            Image Checkbox Bootstrap template for multiple image selection
            https://www.prepbootstrap.com/bootstrap-template/image-checkbox
            -->
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
            <div class="container">
                <h3>Bootstrap image checkbox(multiple)</h3>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    ...
                    (omitted for brevity)
                    ...
                </div>
            </div>        
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
            <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script>// image gallery
                // init the state from the input
                ...
                (omitted for brevity)
                ...
                //# sourceURL=pen.js
            </script>
        </body>
    </html>

Answer №2

Snippet:

                    <div class="col-md-3">
                    <div class="custom-control custom-checkbox image-checkbox">
                        <input type="checkbox" class="custom-control-input" id="input1">
                        <label class="custom-control-label" for="input1">
                                <img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
                                <span >Unique Text</span>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="custom-control custom-checkbox image-checkbox">
                        <input type="checkbox" class="custom-control-input" id="input12">
                        <label class="custom-control-label" for="input12">
                                <img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
                                <span >Unique Text</span>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="custom-control custom-checkbox image-checkbox">
                        <input type="checkbox" class="custom-control-input" id="input13">
                        <label class="custom-control-label" for="ck1a">
                                <img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
                                <span >Unique Text</span>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="custom-control custom-checkbox image-checkbox">
                        <input type="checkbox" class="custom-control-input" id="input13">
                        <label class="custom-control-label" for="ck1a">
                                <img src="https://dummyimage.com/600x400/f48024/000" alt="#" class="img-fluid">
                                <span >Unique Text</span>
                        </label>
                    </div>
                </div>

Similar outcome: https://i.stack.imgur.com/YZK6I.png

Original Source:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for storing user input into an array

I am currently developing a calculator that uses Json data. The goal is to retrieve the Grid Code associated with a specific longitude and latitude input. However, I am encountering an issue where the result returned is 0, indicating that the value of the ...

javascriptjqueryarraysinput

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

I am having trouble saving the text from a textarea to the Controller session using jQuery AJAX post method in Codeigniter Smarty. I am unable to save the data to the session. Can someone please provide me with guidance and a detailed example of how to ach ...

javascriptphpjqueryajaxcodeigniter

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

Rearranging components in React does not automatically prompt a re-render of the page

I'm currently working on a project to display the update status of my Heroku apps. The issue I encountered was that the parent component (Herokus) was determining the order, but I wanted them sorted based on their update dates starting from the most r ...

javascriptreactjsherokuecmascript-6

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

htmlhyperlinkblazortiktok

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Capture the onclick attribute with jQuery and then reapply it

I am facing a challenge with a page that has several calendars composed of HTML tables where each day is represented by a td. The td elements have an onClick attribute which I need to manipulate using jQuery. Specifically, I need to remove the onClick attr ...

javascriptjqueryhtml

How can Bootstrap be utilized for Image Overlay?

I'm currently using bootstrap and have a 3x3 grid of 200x200 images. I've searched everywhere for a solution to add an overlay, but haven't had any luck so far. I'm still new to coding and trying to figure things out. I saw on Serenbe. ...

htmlcssoverlay

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

Extract data from nested divs using Excel VBA

Can anyone help me extract the start date from the code below? My current code does not seem to recognize the 'nested' div "daysTips." Any assistance would be highly appreciated. Thank you! HTML Screen Capture: https://i.sstatic.net/4fej8.jpg S ...

htmlexcelvbaweb-scraping

Repeating Elements with Angular and Utilizing a Touch Keyboard

Currently, I am developing a table with various fields and the ability to add new rows. The goal is to display all the inputted data at the end. This application is specifically designed for touch screen monitors, so I have created a custom keyboard for in ...

javascriptjqueryangularjskeyboard

When utilizing a JQuery plugin for sliders, Dart does not function in the same way that traditional JavaScript does

Starting out with Dart for Front-End development has been a bit challenging for me. I am trying to incorporate a JQuery plugin called FlexSlider using the Js-Interop Dart Library. However, it's not functioning as expected compared to pure JavaScript, ...

javascriptjquerydartflexslider

Alter the value of a parameter within a script tag with JavaScript/jQuery

Looking to dynamically change a parameter value using JavaScript or jQuery. Here is an example URL: www.exampleurl.com/somepage?foo=test I have a function that can extract the value after the 'foo' parameter: function getParameterByName(name, ...

javascriptjqueryhtml

Three.js is not displayed by the browser

I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...

htmlthree.jswebglrender

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

javascriptangularjsjsonangularecmascript-6

Tips on storing the amount of time a user devotes to answering questions on my form into a database

I am facing an issue with storing the "duration" in my database. The "duration" I aim to store is the time spent by the user answering a question I created. When they click the submit button, I want to save the duration they spent in the database. Below i ...

javascriptphphtmlmysqllaravel

When it comes to iterating through arrays in nodejs

Can someone assist me with using a for loop on an array to search for titles? I have a basic ADD TODO form input that submits and adds todos or titles to the array: todos.push({ title: req.body.add_todo_input, complete: false }); I am pushing user input ...

javascriptarrays

Creating a function that uses setInterval to continuously update the input with a specific value

I am looking to use the setInterval function to continuously update the value of #test1. Additionally, I want the value of #test1 to be cleared and reset to 1 second after the user clicks a button. Example output can be found here: http://jsfiddle.net/eK ...

javascriptjqueryajaxhtml

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

phpjavascriptajaxjsonundefined

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

javascriptjqueryhtmlcss