Issue with the Select All checkbox functionality in an asp.net mvc project

https://i.sstatic.net/Y5ml2.png

Here, I manually select checkboxes and press the sync button. When I do this individually, it works properly. However, if I press the select all button, all the checkboxes are selected but the sync process does not occur.

This is the select all button and its function

<div class="col">
  <label style="padding:10px 0 0 8px">
    <input type="checkbox" class="i-checks" name="input[]" onClick="toggle(this)">
    <span class="ml-2">Select All</span>
   </label>
</div>

This is the script section

<script language="JavaScript">
    function toggle(source) {
        checkboxes = document.getElementsByName('foo');
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked =source.checked;

        }
    }
</script>

These are the checkboxes

<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
        class="i-checks" name="foo"></td>

Answer №1

function switchToggle(checked) {
  var checkboxes = document.getElementsByName('foo');
     for (var i = 0, n = checkboxes.length; i < n; i++) {
         if (checkboxes[i].selected !== checked) {
       checkboxes[i].toggle();
   }

} }

Answer №2

When a user clicks on a checkbox, a click event is currently being utilized. However, it is recommended to switch to using the onchange event in your JavaScript code:

$(document).ready(function()
{
  $('.i-checks').change(function() 
  {
    toggle(this)
  });
});

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

I am experiencing an issue where the jquery sleep function is not being executed during

I currently have an Ajax request that is awaiting a response from another process. function checkProcess() { var flag = 0; while (flag === 0) { $.ajax({ url: "cs/CheckForProcess", async: false, success: ...

Achieving a perfect circle can be accomplished by setting both the width and height to the same

Trying to make the height of an element equal to its width For example, aiming for a perfect circle Although the console displays equal values, the resulting height is noticeably greater than the width $('button').on('click', funct ...

Having trouble sending a file to a web service and receiving the response in Json format?

I have a straightforward web service that requires file uploads, but I also need the response in JSON format. This poses a challenge as normally requests for JSON responses require a content-type of 'application/json', yet file uploads necessitat ...

Utilizing material-ui textfield involves a delay when the input is being focused

Is there a way to trigger inputRef.current.focus() without relying on setTimeout? It seems like the focus is not working as expected in React or MaterialUI. For a demonstration, visit: https://codesandbox.io/s/goofy-gareth-lkmq3?file=/src/App.js export de ...

Encountered an issue with identifying the equality operator of type json[] while attempting to use UNION

My goal is to run multiple queries on a single table utilizing the UNION rule The two tables I am working with are: project (id, name, pinned BOOLEAN) skills (m2m relationship to projects) Specifically, I am trying to fetch a set of rows where pinned i ...

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

Navigating through a multistep form in AngularJS using UI Router and arrow keys for seamless movement

Is there a way to navigate to the next or previous form step using arrow keys in AngularJS UI Router? The code provided below is currently allowing navigation with previous and next buttons. .config(function($stateProvider, $urlRouterProvider) { $stat ...

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

Commitments and incorporating items from an array into objects nested within a separate array

My current project involves a command line node application that scrapes valuable data from a specific website and stores it in a CSV file. For the scraping functionality, I am utilizing scrape-it, which enables me to successfully extract all the necessa ...

Tips for handling Google Spanner Date type in JavaScript

I am facing a challenge with Google Cloud Spanner as I work with multiple tables containing columns of type Date. While inserting entries with specified dates works fine, the issue arises when trying to retrieve these entries in the JavaScript frontend. Th ...

Display a JSON encoded array using Jquery

Within an ajax call, I have a single json encoded array set: $var = json_encode($_SESSION['pictures']); The json encoded array is stored in a variable called "array" When I try to display the contents of "array" using alert, I get this respons ...

Show / Hide content by clicking another div

I need help figuring out how to create a collapsible div that expands and collapses when a different div is clicked. The expanding/collapsing effect that I've been experimenting with is similar to what I want, but I'm not sure how to modify the c ...

Angular is using double quotes (%22) to maintain the integrity of the data retrieved from JSON responses

After running a PHP script, the following response is returned: {"result": "0", "token":"atoken" } To execute the script with Angular, the following code is used: $http.post( API["R001"], $scope.user, {}).then($scope.postSuccess, null); Upon successful ...

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

What is the best way to require users to click one of the toggle buttons in a form?

Is it possible to require the user to click one of the toggle buttons in a React form? I want to display an error if the user tries to submit the form without selecting a button. Even though I tried using "required" in the form, it didn't work as expe ...

After an ajax request, the Jquery hover effects are no longer functional

On my website, I have implemented ajax calls to filter product results and apply effects. However, the effects on these products seem to stop working after the ajax call is completed. Located at the bottom of the page's code is the following script: ...

Is AJAX causing issues with my media uploader and color picker?

Currently, I have incorporated tabbed navigation within a WordPress admin page and it is functioning properly on its own (data can be saved). However, I am now looking to implement some AJAX functionality for toggling between pages. The issue arises when t ...

Remove the preset text in an input field by clicking on it

Looking for help: <input name="Email" type="text" id="Email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7fff3fbfed2f3f0f1bcf7eaf3ffe2fef7">[email protected]</a>& ...

Issue with displaying info window when clicking on marker in react-google-maps

Seeking assistance in opening the info window of specific markers when clicked. All markers and map are displaying correctly, with correct titles appearing on hover. However, clicking a marker does not trigger the info window to show. The console confirms ...

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...