Tips for choosing multiple checkboxes with the input type of "checkbox"

Question

Tips for choosing multiple checkboxes with the input type of "checkbox"

<table class="table table-striped grid-table">
    <tr>
        <th>Id</th>
        <th>Code</th>
        <th>
        <input type="checkbox" id="box"/>
        </th>
    </tr>
    @foreach (var item in (IEnumerable<cit.Models.getPersonPerName_Result>)Model)
    {
        <tr>
            <td>@item.idper</td>
            <td>@item.pername</td>
            <td>      

             <div class="pure-checkbox">
               <input type="checkbox" id="@item.idper" class="chk" checked="@(item.idperson == ViewBag.idperson ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
               <label for="@item.id.ToString()"></label>
             </div>

            </td>
        </tr>
    }

In the code above, I have created a pure-checkbox class where item.idper represents values of my document's column and item.pername represents codes in another column. The pure-checkbox column is specifically designed for checkboxes that can be individually checked but I want to enable checking all checkboxes at once using an input type method.

javascript c#model-view-controller

Answer 1

Answer №1

To achieve this functionality, you need to monitor the changes in the state of the main checkbox and react accordingly by using an event listener. The event handler should toggle the checked state of all other checkboxes based on the state of the main checkbox:

var masterCheckbox = document.getElementById('master');
masterCheckbox.addEventListener('click', function() {
    var secondaryCheckboxes = document.getElementsByClassName('secondary');
  
  for(var i = 0; i < secondaryCheckboxes.length; i++) {
    secondaryCheckboxes[i].checked = this.checked;
  }
});

For a live demonstration, check out this JSFiddle: https://jsfiddle.net/YourUsername/example123/

Answer 2

To achieve this functionality, you need to monitor the changes in the state of the main checkbox and react accordingly by using an event listener. The event handler should toggle the checked state of all other checkboxes based on the state of the main checkbox:

var masterCheckbox = document.getElementById('master');
masterCheckbox.addEventListener('click', function() {
    var secondaryCheckboxes = document.getElementsByClassName('secondary');
  
  for(var i = 0; i < secondaryCheckboxes.length; i++) {
    secondaryCheckboxes[i].checked = this.checked;
  }
});

For a live demonstration, check out this JSFiddle: https://jsfiddle.net/YourUsername/example123/

Answer 3

Answer №2

If you want to achieve this in just one line, you can use the following code:

$(document).ready(function(){
  $("#box").change(function(){  
    $(".chk").prop('checked',$(this).prop('checked'));
  });
});

Check out the JSFiddle here

Answer 4

If you want to achieve this in just one line, you can use the following code:

$(document).ready(function(){
  $("#box").change(function(){  
    $(".chk").prop('checked',$(this).prop('checked'));
  });
});

Check out the JSFiddle here

Tips for choosing multiple checkboxes with the input type of "checkbox"

Answer №1

Answer №2

Similar questions

JavaScript code to dynamically change the minimum value of an input field when the page

Removing a checker piece in the game of checkers after successfully jumping over it

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

Wrapping an anchor tag with a div in Codeigniter

Using selenium to click on the initial link displayed on the search results page

Unable to save the current light/dark mode preference to local storage

Trouble arises with the MUI 5 date picker when inputFormat is included

The module specifier "tslib" could not be resolved due to a TypeError. It is necessary for relative references to begin with either "/", "./", or "../"

What could be causing the poor performance of WebGPU in my benchmark when compared to WebGL?

Receiving JSON objects from Javascript in Django Views

Guide to importing VRML Files with three.js

Tips for creating seamless transitions between URLs in Next.js

Is this example a strong demonstration of implementing simple inheritance in JavaScript?

What is the best way to eliminate an item from an array in JavaScript or AngularJS?

Utilize a fluid AJAX endpoint for the Vue Select2 encapsulated component

Is it possible to navigate between jQuery EditInPlace fields using the Tab key?

Link the selector and assign it with its specific value

Positioning Div at the Bottom of a Interactive Flip Card Using Bootstrap 4

I am facing difficulty in loading another page due to AngularJS restrictions

Interactive table with dynamic data retrieval