Emphasize a checkbox by selecting it when another checkbox is checked

Question

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?

javascript html css

Answer 1

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

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 3

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 4

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 5

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);

      }
    });

Answer 6

//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);

      }
    });

Emphasize a checkbox by selecting it when another checkbox is checked

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my fetch() function to send a JSON body that is empty?

Is there a way to make Bootstrap 5 load its jQuery plugins right away, rather than waiting for DOMContentLoaded?

Utilize the power of EasyAutocomplete in jQuery to easily filter JSON

Prevent links from being clicked multiple times in Rails using Coffeescript

Triangles without their pointed tips

Transforming the playbackRate property of a web audio-enabled audio element

The JSX snippet accurately displays the expected value on some pages, but displays an incorrect value on other pages

Adjust the form input box height to a different size

What happens when absolute positioning looks for "relative" inside nested divs?

Struggling to grasp the concept of using z-index in CSS

How to retrieve the clicked value using jQuery within a jinja2 loop

Passing a JSON object from a Rails controller to Javascript

Interactive rotating display with constantly updating information

Utilizing a custom function to filter Firestore collection data based on location proximity

Encountering a ReferenceError while debugging MongoDB: The console object is undefined

Utilize Material UI AutoComplete in React to showcase a variety of choices in a list and capture various selections in the form state, including multiple values

Executing npm / http-server script

Connecting multiple TypeScript files to a single template file with Angular: A comprehensive guide

Type of result from a function that returns a linked promise

Buefy: Secure the header of the table in place while allowing the rows to scroll freely