Steps for adding a check mark to the chosen image

Is there a way to make a check mark ✓ appear in the upper right corner of an image when it is clicked on? The intention is for the icon to disappear when another image is selected, following the same effect that has been implemented.

I have looked but haven't been able to find the correct solution using Jquery or CSS

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}

.cc-selector input:checked +.drinkcard-cc +.fa-check{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
            display: show;

}

.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1) grayscale(1) opacity(.7);
       -moz-filter: brightness(1) grayscale(1) opacity(.7);
            filter: brightness(1) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover{
    -webkit-filter: brightness(1.04) grayscale(.5) opacity(1.2);
       -moz-filter: brightness(1.04) grayscale(.5) opacity(1.2);
            filter: brightness(1.04) grayscale(.5) opacity(1.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector">

    <div>

        <input checked="checked" id="checkRabbit" type="radio" name="rabbit" value="rabbit">

        <label class="drinkcard-cc rabbit" for="checkRabbit">

            <img src="https://pbs.twimg.com/profile_images/378800000012999353/237fc396ff1510bb381c2a534a834fd7.jpeg" class="img-responsive">

        </label>

    </div>

    <div>

        <input id="checkMonkey" type="radio" name="monkey" value="monkey">

        <label class="drinkcard-cc monkey" for="checkMonkey">

            <img src="https://pbs.twimg.com/profile_images/653420524975079424/VOzhTPsz_400x400.jpg" class="img-thumbnail">

        </label>

    </div>

</div>
javascriptjqueryhtmlcss

Answer №1

To create interactivity with the image, a click event handler can be attached to it. Upon clicking the img element, a specific class can be added to indicate an active state.

Alternatively, a hidden svg or img (such as a check mark) can be utilized with a CSS property of display: none. This hidden element can then be toggled to display when the main element is in an active state.

In this example, instead of using a hidden element, a border is applied to visually differentiate the active state.

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', clickHandler);
});

function clickHandler(e) {
  let target = e.target;

  [...document.querySelectorAll('.item')].filter(item => item !== target).forEach(item => {
    item.classList.remove('active');
  });

  target.classList.add('active');

}
.cc-selector input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cc-selector input:active+.drinkcard-cc {
  opacity: .9;
}

.cc-selector input:checked+.drinkcard-cc+.fa-check {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
  display: show;
}

.drinkcard-cc {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1) grayscale(1) opacity(.7);
  -moz-filter: brightness(1) grayscale(1) opacity(.7);
  filter: brightness(1) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
  -webkit-filter: brightness(1.04) grayscale(.5) opacity(1.2);
  -moz-filter: brightness(1.04) grayscale(.5) opacity(1.2);
  filter: brightness(1.04) grayscale(.5) opacity(1.2);
}

.item.active {
  border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector">

    <div>

        <input checked="checked" id="checkRabbit" type="radio" name="rabbit" value="rabbit">

        <label class="drinkcard-cc rabbit" for="checkRabbit">

            <img src="https://pbs.twimg.com/profile_images/378800000012999353/237fc396ff1510bb381c2a534a834fd7.jpeg" class="img-responsive item active">

        </label>

    </div>

    <div>

        <input id="checkMonkey" type="radio" name="monkey" value="monkey">

        <label class="drinkcard-cc monkey" for="checkMonkey">

            <img src="https://pbs.twimg.com/profile_images/653420524975079424/VOzhTPsz_400x400.jpg" class="img-thumbnail item">

        </label>

    </div>

</div>

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

What is the best way to transfer data to JavaScript?

Being new to JQuery and JSP, I am looking for guidance. My requirement: I need to pass specific arguments from one JSP page to another JSP page and access these arguments within the JavaScript code on the receiving JSP page. Details: The arguments cons ...

jqueryjsprequest

Step-by-step guide on saving an array to localStorage using AngularJS

Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...

javascripthtmlangularjscookiestore

Execute AJAX request to load the PHP script

In my posting system, when a person clicks on " | Comment," a div appears with the following code: <div class="commentbox" id="commentbox<?php echo $_row["id"];?>" style="display:none;"><div style="padding-right:10px;" align="right">& ...

phpjqueryajax

Tips for implementing pagination using AngularJS, specifically with ngRepeat and Bootstrap UI components

What is the easiest method for implementing pagination? I want to utilize ng-repeat to iterate through a list of items, each containing id and name attributes. The code below currently works for displaying 15 items on 2 pages, but I would like the first pa ...

javascriptjqueryangularjsangular-ui-bootstrap

Tips for making commands function with both capitalization and non-capitalization

Hey there! I am currently working on a Discord.js Bot and trying to create a help command. Here's my current command: if (!args[0]) return msg.channel.send(normal); else if (args[0].toLowerCase() == "Everyone") return msg.channel.send( ...

javascriptnode.jsdiscord.js

Tips for utilizing AJAX and jQuery to fetch content from WordPress pages

Let me simplify my request so it's easy to grasp. I have a WordPress website with multiple pages. My goal is to create a main page called "Work" and add a submenu with links to "Videos", "Audio", "Writing", and "Design" pages. Here's the catch - ...

javascriptphpjqueryajaxwordpress

Troubleshooting issue: Bootstrap button onclick function not firing

My node express app is using EJS for templating. Within the app, there is a button: <button type="button" class="btn btn-success" onclick="exportWithObjectId('<%= user.id %>')">Export to csv</button> Accompanying the button i ...

javascriptnode.jstwitter-bootstrapejs

Implementing popup alert for multiple tabs when Javascript session times out

I have implemented javascript setInterval() to monitor user idle time and display a popup alert prior to automatic logout. However, it seems to be functioning correctly only in single tabs. Here is the code snippet: localStorage.removeItem("idleTimeValue ...

javascriptphptabssetintervalsession-timeout

What is the best way to insert a <div class="row"> every 2 items in a Vue.JS template loop?

In my model, I have an array of images' URLs of varying lengths. I want to display 2 images per row on my page, resulting in the following layout: <div class="row"> <div class="col"> <img ... /> </div& ...

javascripttwitter-bootstraptemplatesvue.jsbootstrap-4

Issue with AngularJS: Copying and appending with $compile is not functioning properly

Below is the snippet of my angularjs Controller var $tr = angular.element("#parent" + obj.field_id).find("tbody"), $nlast = $tr.find("tr:last"), $clone = angular.copy($nlast); $clone.find(':text').val('' ...

javascriptjqueryangularjsappend

Use jQuery's post method to send an input file to a PHP file whenever it changes

From my understanding, it seems that $.ajax() is similar to $.post(). I am attempting to use $.post to send an input file to a PHP script in order to upload the chosen image once the user has browsed for it. I'm trying to implement something straight ...

phpjqueryajax

Limiting Firebase queries with startAt and endAt

I need to retrieve the first 100 results from my Firebase data, followed by the next 100, and so on. Despite trying multiple methods, I have not been successful. Method 1 ref.child('products').orderByChild('domain').startAt(0).endAt(1 ...

javascriptfirebasefirebase-realtime-database

Internet database inventory

Looking for assistance in creating a list. <div id="ul"> <li></li> </div> ...

javascripthtmlsplitwhile-loopindexeddb

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

javascriptjqueryhtmljson

How to perfectly align a CSS block

This snippet of css is responsible for positioning a group of third-party images that are dynamically created as part of a JavaScript slider. I am looking to center these images based on the alignment of another image located elsewhere on the page. I hav ...

htmlcss

The Axios GET method retrieves a response in the form of a string that represents an object

I have developed a function that triggers an axios Request. I am working with typescript and I am avoiding the use of any for defining return data types of both the function and the axios request itself. The issue arises when the returned object contains ...

javascripttypescripthttpobjectaxios

No intersects found with Three.js raycast function

Seeking assistance with detecting a user click on a specific cube within my 3D scene. While similar questions have been seen, none match my exact issue. The problem arises when my mouse down function is triggered - the intersect array remains empty. Looki ...

javascriptthree.jsraycasting

Inquiring about design layout for an iPhone application incorporating CSS, jQuery, and JQTouch

I am currently in the process of learning how to develop an iOS website by utilizing Johnathan Stark's book, Building iPhone Apps from O'Reilly. To better understand my issue, please take a look at the desktop version on www.saudialberta.com. Upo ...

jqueryjqtouch

Using PHP to decode a JSON array (Troubleshooting issues with Ajax JSON POST to PHP)

I am new to PHP and I have a jQuery/JavaScript based application that involves finding nearby places and presenting the results in a sorted order. I am attempting to move the sorting function from the HTML page to server-side PHP. This process includes ...

phpjqueryajaxjson

What could be causing the custom aside or slide panel to not slide properly when using Angular Strap?

I recently tried creating a slide panel and came across the Angular Strap library. After studying the documentation, I attempted to implement the slide panel using this library. However, I encountered an issue where my side panel did not slide as demonst ...

javascriptjqueryangularjsangularjs-directiveangular-strap