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

Using a custom jQuery function within an Angular component class

I have a custom query function that I wrote in a JavaScript file located under the source folder (/src/assets/inlineedit.js) of my Angular application. Here is the content of the file: $.fn.inlineEdit = function(replaceWith, connectWith) { $(this).ho ...

javascriptjqueryangularfunction

What steps do I need to take to develop a CLI application similar to ng, that can be installed globally on the system

Upon installing npm i ng -g How does the system determine the installation path? I am interested in creating an application that can be installed and executed similarly. ...

javascriptnpmcommand-line-interface

Code coverage analysis in a node.js TypeScript project consistently shows no coverage metrics

I'm currently working on a backend TypeScript project where I'm aiming to obtain coverage reports for unit test cases. However, Jest is returning empty coverage reports both in the terminal and in the HTML report, with no information provided. Ev ...

javascriptnode.jstypescriptjestjscode-coverage

When I open Firefox, all I see is a blank page with only the h2 heading displayed

I am trying to print the text "I can print" on a page, but only the title shows up and the rest of the page is blank. What mistake might I be making? <!DOCTYPE html> <html> <head> <title>Object exercise 4</title> </head& ...

javascripthtml

Animating Font Awesome content through CSS transitions

I am looking to animate a font awesome pseudo element on my website. Below is the HTML code I am working with: <li class="has-submenu"> <a onclick="$(this).toggleClass('open').closest('.has-submenu').find('.submenu&a ...

htmlcsspseudo-element

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

NavigAuth - NativeScript Vue's Innovative Authentication-driven Navigation

After spending hours trying to figure this out, I need to ask for help. How can I create a simple Auth-based Navigation within my App? I have successfully set up a Firebase auth user inside my Vuex using an auth listener. Now, all I want is to display th ...

javascriptvue.jsnativescriptnativescript-vue

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

javascriptjquerypythonhtmlselenium

Uncaught TypeError occurs in AngularJS and Mocha testing when the function (window.beforeEach || window.setup) is not defined

I've been experimenting with testing angular js using mocha in my meteor application. After installing ngMock and injecting it into my module, I encountered an issue right when starting my app. Regardless of whether I installed ngMock from atmosphere ...

javascriptangularjstestingmeteormocha.js

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

javascripthtmlangularjs

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

javascriptjqueryhtmlcanvas

Failed to locate lodash during npm installation

I recently set up my project by installing lodash and a few other libraries using npm: npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-testem --save-dev npm install sinon --save-dev npm install -g phantomjs npm install lodash --save ...

javascriptnode.jsnpmtestem

Enabling client-side access to collections without the need for meteor startup

Whenever I define my Meteor collections on the server and attempt to access them in the client without being within any of the predefined Meteor methods such as rendered, events, created, or helpers, I consistently encounter an error stating Meteor colle ...

javascriptmeteor

What is the process for attaching an event handler to an element that is displayed after a button click?

I need some assistance with my JavaScript code. I have a page with two links, and when the second link is clicked, certain fields are displayed. I am trying to write an onkeyup() event handler for one of these fields, but seem to be missing something. Here ...

javascriptjquery

Prevent Xdebug from processing multiple requests

One recurring issue I encounter in my app is calling an API endpoint every 60 seconds. However, when I attempt to debug using Xdebug, stepping through the controller associated with that endpoint often takes longer than a minute. This results in another re ...

javascriptphpxdebugxdebug-3

When the Protractor configuration is executed, it displays the message "The requested webpage cannot be accessed."

Testing protractor on a vanilla.js app and encountering an error when running protractor basicConf.js The following error is occurring: This webpage is not available ERR_CONNECTION_REFUSED Here is the test script in use: describe('foo', fun ...

javascriptangularjsseleniumjasmineprotractor

Prevent HTML from being escaped in data-binding while utilizing repeat-templates in Polymer

Hey there! <template repeat="{{item in items}}"> <div layout horizontal> <div>{{item['content']}}</div> <div>{{item['more_content'])}</div> ...

htmldata-bindingdartpolymer

Is there a way to convert the text within a div from Spanish to English using angular.js?

I am working with a div element that receives dynamic text content from a web service in Spanish. I need to translate this content into English. I have looked into translation libraries, but they seem more suited for individual words rather than entire dyn ...

javascriptangularjs

Strange Behavior of HTML5 Audio Elements

I'm currently in the process of designing a shop website with a nostalgic Windows98 theme. On the product's page, I want to include a preview of audio. Here is the CSS code that I have used for the HTML5 audio element: audio::-webkit-media-contr ...

htmlcssaudio

Filling a HTML div with data through PageMethods and AJAX

My issue is quite unique. Despite checking numerous examples before reaching out here, I am facing a peculiar problem. I have a div element in my ASPX file and I am using AJAX to send a POST request to populate it. <script> function send(input ...

javascriptjquery.netajax