The issue I am facing is that when I click on a checkbox, only one of them seems to respond

When I click the button, only the first checkbox event is being checked while the rest of them are not. Can someone please provide some guidance on how to fix this issue?

$("#cascadeChange").click(function() {
  //alert("Clicked");

  var isChkIp = $("#chkboxIP").is(":checked");
  if (isChkIp) {
    $("#IINTier1Ip").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Ip").val($("#txtCascadeTier2").val()).change();
    $(".txtIpOon").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
    return true;
  } else {
    return false;
  }

  var isChkOp = $("#chkboxOp").is(":checked");
  if (isChkOp) {
    $("#IINTier1Op").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Op").val($("#txtCascadeTier2").val()).change();
    $(".txtCascadeOonOp").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
    return true;
  } else {
    return false;
  }

  var isChkOpEr = $("#chkboxOpEr").is(":checked");
  if (isChkOpEr) {
    $("#IINTier1OpEr").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2OpEr").val($("#txtCascadeTier2").val()).change();
    $("#OONOpEr").val($("#txtCascadeOon").val()).change();
    return true;
  } else {
    return false;
  }

  return true
});

Answer №1

When the event handler function encounters a return statement, it will terminate execution immediately. To resolve this issue, ensure you invoke preventDefault() on the event being triggered:

$("#cascadeChange").click(function(e) {
  var isChkIp = $("#chkboxIP").is(":checked");
  if (isChkIp) {
    $("#IINTier1Ip").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Ip").val($("#txtCascadeTier2").val()).change();
    $(".txtIpOon").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
  } else {
    e.preventDefault();
  }

  var isChkOp = $("#chkboxOp").is(":checked");
  if (isChkOp) {
    $("#IINTier1Op").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2Op").val($("#txtCascadeTier2").val()).change();
    $(".txtCascadeOonOp").val($("#txtCascadeOon").val()).change();
    $("#idCscade").modal('hide');
  } else {
    e.preventDefault();
  }

  var isChkOpEr = $("#chkboxOpEr").is(":checked");
  if (isChkOpEr) {
    $("#IINTier1OpEr").val($("#txtCascadeTier1").val()).change();
    $("#IINTier2OpEr").val($("#txtCascadeTier2").val()).change();
    $("#OONOpEr").val($("#txtCascadeOon").val()).change();
  } else {
    e.preventDefault();
  }
});

Furthermore, generating numerous events in the DOM through code indicates a potential structural weakness. Consider centralizing related functionality within your code base and invoking it directly when needed.

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

Unlocking the Potential of JavaScript Proxy: Clearing Out an Array Object

Examining the JavaScript Proxy code snippet below: const queue = new Proxy([], { get: (target, property) => { return target[property]; }, set: (target, property, value) => { target[property] = value; this._pro ...

Activate AngularJS autocomplete when populating the input field using JavaScript

I'm currently facing an issue with updating the value of an input field on a website using JavaScript. Although I can successfully update the input field's value, I find that I am unable to trigger the autocomplete feature. Interestingly, when ...

The error of "Uncaught ReferenceError" is being triggered by the use of `process?.env?

A bug was discovered in our front-end code related to the following snippet: <span style={{ color: 'red' }}>{process?.env?.REACT_APP_HEADER_SUFFIX ?? ''}</span> The bug triggered the following error message: Uncaught Refere ...

Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one. ...

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

Implementing bi-directional data binding between sibling components in Vue.js

Is it possible to create a dual binding scenario with the typeahead plugin https://github.com/pespantelis/vue-typeahead, where the search terms of two typeaheads are linked? This means that regardless of which search box the user types into, both should ...

JavaScript - Separate Artist and Title

In the code snippet below, I am using a Parser script to extract metadata from a live streaming radio station: const Parser = require('../src'); const radioStation = new Parser('http://stream.com/live_32.aac'); radioStation.on(' ...

Struggling to make align-content function properly in a CSS flexbox layout grid

Utilizing CSS flexbox for designing a grid of items that wrap on resizing the page. Wanting to achieve a horizontally centered grid, successfully done with justify-content: center;. However, facing an issue where the last box in some cases is centered inst ...

Is there a way to display the inbox area upon completion of the document loading process?

I'm currently working on creating an inbox feature for my personal portfolio, mostly as a learning exercise rather than for any practical use. However, I've run into an issue where all emails are being displayed by default when the page loads wit ...

What is the best way to show the result of a PHP form in an HTML page when the PHP processing is on a different page, without relying

Imagine having a form located in the file called form.php. <form action="process.php" method="POST"> <input type="text" name="message"> <input type="submit" value="Submit"> </form> <span class="result"></span> The proc ...

"Encountered a Parsing Error: function keyword was an unexpected token in an Async Function using a more recent version of Node

In the process of working on a side project, I am utilizing node and firebase technologies. While I have successfully created regular functions and cloud functions, I encountered an issue when attempting to create an async function like so: async function ...

Having trouble bringing my custom-built Angular module into my Angular application

Currently considering the utilization of this Yeoman generator as a starting point for a small project that will contain several reusable form components to be published. The generator constructs a module and an example component, directive, pipe, and serv ...

The background image on mobile devices is excessively zoomed in

My RWD page is experiencing a strange issue with the background image. The image has the following styles: #background-image { width: 100%; height: 100%; opacity: 0.5; position: absolute; z-index: -1; background-image: url('../landing.jpe ...

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

Looking for someone to break down this Typescript code snippet for me

As a Javascript developer, I am currently diving into an unfamiliar TypeScript code block within a project. Here is the code snippet: ViewModel newPropertyAddress = new ViewModel(){name, previousPro = oldValue } ...

combine ngClass properties if substitution is true

My directive includes replace: true in the definition. <my-custom-tag> </my-custom-tag> This is the template for the directive: <div data-ng-class="{'class1': condition1, 'class2': condition2}"> </div> When u ...

Identify the fields in the form that have been edited for easier reference

Seeking guidance on creating a form with interactive input box fields. When a user inputs something, the field highlights in orange. Moving to another field removes the highlight and focuses the new box. Clicking "save" stores the form data. Pressing "mo ...

Unusual problem encountered with Chart.js bar chart, image dispersion

On my HTML page, I have integrated a stacked bar chart using the Chart.js library to visually represent data for users. The data changes based on user selection, and the JavaScript function that enables this onclick feature is: function aggLav(){ [... ...

The light slider feature is experiencing technical difficulties within the Bootstrap model

I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, plea ...

Creating a multilingual website with Nextjs 13 App Router using internalization, all without the need

As I develop a web app that requires user authentication to access, I am currently using Next.js 13 with the App Route (not Pages Route). My goal is to implement internationalization without having to create sub-routes like /en, or use domains such as mywe ...