Using Jquery to select a specific id for an input element that is a checkbox

I've been working on a snippet of jQuery code that I'd like to tailor to be more specific for one of two different input elements on my HTML page.

  <script>
  // ensure only one box is checked at a time
  $(document).ready(function() {
      $('input:checkbox').click(function() {
          $('input:checkbox').not(this).prop('checked', false);
      });
  });
  </script>

These are the two inputs in question:

<div id="reponses-section" class="form-check">
    <c:forEach items="${question.reponses}" var="reponse">
        <input id="${reponse.id}" name="id-reponse" value="${reponse.id}"
                type="checkbox" class="form-check-input">
        <h5>${reponse.texte}</h5>
    </c:forEach>
</div> 

<div id="theme-btn" class="pull-right">
    <label class="switch">
        <input id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">
        <span class="slider round"></span>
    </label>
</div>

Would it be possible to assign an ID to the JavaScript code sample, and if so, what would be the correct syntax to do so?

Thank you for your help!

Answer №1

When using jQuery for selecting elements, you can employ CSS selector syntax to choose elements based on their IDs, for example using #yourTargetId.

Answer №2

I highly recommend utilizing this approach. Feel free to modify the name of the data-id attribute as needed.

$(document).ready(function() {
    $('input[data-id="checkbox1"]').click(function() {
        $('input[data-id="checkbox1"]').prop('checked', false);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input data-id="checkbox1" id="${reponse.id}" name="id-reponse" value="${reponse.id}" type="checkbox" class="form-check-input">

<input data-id="checkbox2" id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">

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

Utilize a drop-down menu and Jquery in Rails to navigate to the editing path

In my application, there is a select dropdown menu containing various items. When the user selects an item from this dropdown menu, I want to redirect them to the edit_item_path corresponding to that specific item_id. For instance, if the user selects an i ...

Scrolling Down on a Jquery Login Page

I am currently utilizing JQuery version 1.4.2. My objective is to allow the user to scroll down to the login form by clicking on the 'login' option in the top menu, similar to Twitter's design. The implementation works impeccably with insert ...

Ways to eliminate project title from the URL

After removing the hash tag from the URL with $locationProvider.html5Mode(true), I attempted to address the refresh issue by adding the following code to my .htaccess file: Options +FollowSymlinks RewriteEngine On RewriteBase /test/ RewriteCond %{REQUEST_ ...

Creating a personalized input slider: A step-by-step guide

I have a question about how to design a custom input slider with the label inside the field itself. The desired output should look like the screenshot below: https://i.sstatic.net/gE6EJ.png I have successfully created the input field part, but I am stru ...

Guide to generating a new element and displaying updated data whenever it is retrieved in a React application

I'm completely new to React and I'm struggling with rendering and listing data fetched from Firebase on my HTML page. I attempted the following approach: const Music = ({ match }) => { const [titles, setTitles] = useState([]); // Change ...

Increase the count for each category with the help of JavaScript

Currently, I am working on an application using PHP and have 180 vendors registered in the database. Each vendor has a unique ID stored in the database. I need to create a system where every time a user clicks on the "view details" button for a specific ...

Executing a function when a specific element is triggered within an ng-repeat in AngularJS

Hey there, I've been grappling with changing the limitTo filter on a specific list, but I'm encountering an issue: whenever I trigger the filter change, it applies to all ng-repeated categories. The function within my main controller is as foll ...

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

Experience the power of CanJS Observable data objects with the added feature of

When working with canJS Observable, I encountered an issue where I cannot use dots in object keys because canJS interprets them as nesting. For example, if I try to create a new observable like this: var obs = new can.Observe( { "div.test-class": { "color ...

Ordering request parameters in OAuth2 URL with npm passport can be achieved by following a specific method

I have successfully utilized Oauth2 strategies like Github and Twitter to log in to a web application using npm passport. Now, I am interested in logging in using the new global id authentication. You can explore it here ; it's really amazing. Whil ...

Guide on seamlessly adding NPM "dependencies" to index.html using <script> tags in a VUE JS WEBPACK project

Are there any tools available that automatically inject or include NPM dependencies into the index.html file, similar to the GRUNT-BOWER plugin for BOWER dependencies? The project in question is a VUE-CLI WEBPACK project. Can this functionality be achieve ...

Executing Promises in an Array through JavaScript

LIVE DEMO Here is a function provided: function isGood(number) { var defer = $q.defer(); $timeout(function() { if (<some condition on number>) { defer.resolve(); } else { defer.reject(); } }, 100); return defer.pro ...

Send form information using the REST method

Can someone provide guidance on how to properly handle this endpoint in my code? @PostMapping("/createUser") public ResponseEntity<User> createUser(@RequestBody User user) {...} I am looking to implement a user creation feature on my HTML ...

JSON output for creating interactive charts using Highcharts

After much perseverance, I have successfully generated a chart. However, I am facing an issue where the data from JSON is not being displayed - resulting in a blank chart. The chart options currently look like this: series : [{ name: '2000' ...

Can you explain the distinction between Declared Values and Specified Values?

I found myself confused by the distinction between Declared Values and Specified Values. Initially, I believed that the Declared Values were set by the author. These values then filter down to a single value, known as the "winning value", which becomes t ...

What could be the reason for meteor not injecting the text from my template helpers?

My goal is to dynamically generate a table displaying two different sets of data. Despite having verified returns from my database, the rendered page does not show the corresponding HTML elements as expected. Here is the template and HTML code: <templ ...

Issue with Next JS router.push not functioning unless the page is refreshed

I'm currently running Next.js 14.2 in my project with the page directory structure. After building and starting the application using npm start, a landing page is displayed with a login button that utilizes the <Link> component. I have also disa ...

Node.js continues to multiply the data being sent to SQL with each AJAX post request

I'm currently learning how to interact with a database using node.js on the backend and jQuery ajax on the client side. Initially, I was able to get the basic post function to work when a user submits data for the first time. However, subsequent subm ...

Names changes and deletion of files that have been uploaded- Using Vue.js

I attempted to use v-model in order to rename files before uploading them to the system, but unfortunately, it was not successful. As a result, I developed an alternative solution which is functioning perfectly, except for the fact that I am unable to reta ...

What is the best way to activate the function of this element on plus.google.com with a userscript developed with jQuery?

I've been heavily utilizing Google+ lately and I have noticed that I constantly find myself clicking on the 'More' button in the sidebar to access my hidden circles. To streamline this process, I am attempting to create a user script that wi ...