Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmark. However, in the provided example, both "Check 1" and "Check 2" have the same IDs. What I want to achieve is that when I click on "Check 1", the checkmark of "Check 2" should also be highlighted and vice versa.

.checkmark {
  display: inline-block;
  width: 22px;
  /*height: 22px;*/
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
  <label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
    <input type= "checkbox" style= "display:none;" id="10A">Check1
    <span for="10A" class="checkmark"></span >
  </label >
</div>
                            
<div class="menu-sm">
  <label style="display: inline;color: #545454;font-weight:100;"  dataid="' +this.ID +'" >
    <input type= "checkbox" style= "display:none;" id="10A">Check2
    <span for="10A" class="checkmark"></span >
  </label >
</div>

My query is how can I make sure that all the checkmarks with the same IDs are highlighted together?

javascripthtmlcss

Answer №1

Your highlighting technique relies on the :checked selector - when the checkbox is checked, the following span is highlighted.

To achieve this effect, you will need to utilize javascript to respond to the checkbox's onchange / click event and trigger the other checkbox as well.

Here is a basic example of how to implement this, which can be customized to fit your specific requirements:

// Use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
    document.getElementById('checkbox2').click();
});

Answer №2

If you're looking to achieve this functionality using JavaScript, you can utilize the following code snippet.

Here is a breakdown of what this code does:

  • An event listener is added to the change event of both checkboxes.
  • The checked property of the other checkbox is set to be the same as the checked property of the checkbox that triggered the change event.

Important Note: The IDs of the checkboxes have been modified to ensure they are unique.

document.getElementById('10A-1').addEventListener('change', function () {
    document.getElementById('10A-2').checked = this.checked;
});

document.getElementById('10A-2').addEventListener('change', function () {
    document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
  display: inline-block;
  width: 22px;
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
  <label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
    <input type= "checkbox" style= "display:none;" id="10A-1">Check1
    <span for="10A-1" class="checkmark"></span>
  </label>
</div>

<div class="menu-sm">
  <label style="display: inline;color: #545454;font-weight:100;"  dataid="' +this.ID +'">
    <input type= "checkbox" style= "display:none;" id="10A-2">Check2
    <span for="10A-2" class="checkmark"></span>
  </label>
</div>

Answer №3

//Execute this code once the document has finished loading

let checkboxInputs = $('input[type="checkbox"]');
    $(checkboxInputs).on('click', function(){
    if($(this).is(':checked')){
    $(checkboxInputs).prop('checked', true);
    }
      else{
        $(checkboxInputs).prop('checked', false);

      }
    });

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

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

A single background image split into several div elements

I am facing an issue regarding the background image placement in multiple divs. When I set the position to fixed, the image repeats when I resize the screen. However, changing it to absolute causes each div to have its own image. Is there a solution to fi ...

htmlcss

Challenge implementing custom javascript to display categorical/string features on Shiny slider

I'm attempting to design a unique Shiny slider that represents the months of the year. My desired outcome is for the slider to display the names of the months as strings, rather than numeric values where 1 corresponds to January, 2 corresponds to Febr ...

javascriptrloopsshinycategorical-data

What is the process for populating the Body placeholder in asp.net Core MVC?

After reviewing a tutorial, I discovered that the RenderBody method is supposed to display views within the designated placeholder of the layout, as illustrated in this diagram: However, in practice, it did not work exactly as expected. When I created a l ...

cssasp.net-core-mvc

Should I incorporate PHP/HTML code or opt for using a function instead?

I'm currently exploring the most effective method for integrating HTML/PHP code into various pages, such as headers, footers, and other repetitive sections. Would it be better to use include_once(php file) (even if it's used multiple times on a ...

phphtmlfunctioninclude

Strangely unusual issues with text input boxes

So I've set up two textareas with the intention of having whatever is typed in one appear simultaneously in the other. But despite my best efforts, it's not working as expected. Here's the code snippet: <script> function copyText () { ...

javascript

Showing the ng-controller contents post executing AJAX request using the "as" method

My goal is to display the contents of ng-repeat after making an AJAX call using $http. <table ng-controller="TableController as tc"> <tr> <th>Date</th> <!-- other headers are here --> ...

javascriptangularjsajax

Angular Redirect Function: An Overview

In the Angular project I'm working on, there is a function that should navigate to the home when executed. Within this function, there is a condition where if true, it should redirect somewhere. if (condition) { location.url('/home') ...

javascriptangulartypescriptredirectlocation

Can you explain the functionality of the following Express router?

In the tutorial I am currently following, there are 2 router methods used to retrieve articles from the database. router.param('article', function(req, res, next, slug) { Article.findOne({ slug: slug}) .populate('author') .th ...

javascriptnode.jsexpress

having difficulty altering a string in EJS

After passing a JSON string to my EJS page, I noticed that it displays the string with inverted commas. To resolve this issue, I am looking for a way to eliminate the inverted comma's and convert the string to UPPERCASE. Does anyone know how to achiev ...

javascriptnode.jsstringexpressejs

`Using top-level await in a module can interfere with the firing of the `onload` event

It seems that the load event is not triggering when I use await for an IndexedDB opening at the top level within an indirectly loaded module. Interestingly, if I remove the await, the load handler works as expected. Similarly, replacing the openDB call wi ...

javascriptfirefoxasync-awaitindexeddb

Modifying the URL path while navigating through pages with ajax and jQuery

I have implemented ajax post requests to enable paging on a feed within my website. Upon receiving the post request data, I refresh the page by clearing out previous content and displaying the new data retrieved from the request. In addition to this, I wan ...

javascriptjqueryajaxnode.js

Strategies for handling user typos in a JavaScript prompt

Hi there! Just wanted to say that I'm new to this website, so please forgive any posting mistakes I might make. I'm currently taking a web technology class where we're learning JavaScript. In a previous lesson, we covered HTML5 and CSS. Our ...

javascripthtmluser-interface

Ensure that the footer remains at the bottom of the webpage, without being positioned as fixed

I am encountering an issue on my work2 Website where the footer is not staying at the bottom of the page when there is limited content. I have searched extensively on Google, YouTube, and CSS tricks for a solution, but have not found one that works for my ...

htmlcss

I'm having trouble understanding the distinction between this.query and this.query.find(). Can you explain the difference to me?

Currently, I am working on a MERN tutorial where I am developing a full E-commerce application. This is the class that handles querying and various other tasks. constructor(query, querystr) { this.query = query; this.querystr = querystr; con ...

javascriptnode.jsreactjsexpress

Is there a way to retrieve two distinct data types from a single ng-model within a select option?

My mean stack code is functioning well, but I am looking to enhance it by adding a new feature. Specifically, I want to retrieve more elements from my NoSql database while selecting options. This is the structure of my database: Tir2 :id, price, xin, yin ...

javascriptangularjsnode.jsexpress

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

Instruction on inserting NativeBase footer into my React Native application?

As someone new to React Native, I am trying to include a footer bar in my app. Below is the code snippet from my dashboard.js file where I attempted to add the footer bar, but it doesn't seem to be working as expected: import React, { memo } from &ap ...

javascriptandroidreactjsreact-nativenative-base

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

I've successfully implemented a delete function using type: 'DELETE', and now I'm attempting to create an UPDATE function. However, I'm unsure if I'm approaching this correctly. Here's the code I've written so far: ...

javascriptajaxmongodbexpresspost

What is the best way to retrieve a single document from MongoDB by using the URL ID parameter in JavaScript?

I'm currently working on a movie app project and have defined my movie Schema as follows: const movieSchema = new mongoose.Schema({ name: { type: String, required: true }, genre: { type: String, required: tr ...

javascriptmongodbexpressmongoose