Is there a way to identify the specific dynamically added checkbox that was clicked, whether by index or name? I came across a similar question with a solution in this JSFiddle: JSFiddle
Instead of just displaying "clicked", I would like it to show something like "This is the 3rd checkbox". Is this achievable?
I attempted to use $(this).index(), but so far I have not been successful.
One way to find the position of an element within a set is by using the index() method. By utilizing a helper function, you can then format the number as an ordinal to display. Here's an example:
$(document).on('change', '[type=checkbox]', function (e) {
alert('You have selected the ' + getOrdinal($(this).index('[type=checkbox]') + 1) + ' checkbox');
});
function getOrdinal(num) {
var suffix = ["th", "st", "nd", "rd"],
val = num % 100;
return num + (suffix[(val - 20) % 10] || suffix[val] || suffix[0]);
}
Well, Rory managed to optimize it even further. Check out the updated fiddle here :)
Your HTML code:
<button id="append">Append</button>
<div class="wrapper"></div>
<span></span>
Javascript changes:
var checkbox = $('<input/>', {type : 'checkbox'});
$('#append').click(function(){
$('.wrapper').append(checkbox.clone()).append('checkbox');
});
$(document).on('change', 'input[type=checkbox]', function(){
$('span').text('The index is: ' + $(this).index());
});
Here is the code snippet for adding and manipulating checkboxes:
var checkbox = '<label><input type="checkbox" />Checkbox</label>';
$(document).on('click', '.add', function () {
$('#group').append(checkbox);
$('[type=checkbox]').checkboxradio().trigger('create');
$('#group').controlgroup().trigger('create');
});
var symbols = {
1: 'st',
2: 'nd',
3: 'rd',
4: 'th'
};
$(document).on('change', '[type=checkbox]', function (e) {
var index = $('[type=checkbox]').index($(this)) + 1;
var symbol = index >= 4 ? symbols[4] : symbols[index];
var str = 'This is the ' + index + symbol + ' checkbox';
alert(str);
});
I hope this information proves to be useful for your project.
With limited experience in react-redux, I am currently working on a smaller web-based application intended for around 100 users. At this time, I have opted not to use redux due to concerns about its complexity for such a small project. Instead, I have been ...
Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, alo ...
Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...
Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...
I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...
I've run into a challenge with my React app. I'm making endpoint calls to different servers and have withCredentials set to true to include a token/cookie in the requests. The issue arises when trying to make this work seamlessly on localhost. S ...
My task scheduler using React Router 5 and React Redux is working fine. Now I am trying to animate transitions between different routes using react-transition-group. When I click the URL changes, but the screen does not re-render until I manually reload ...
Is it feasible to alter the appearance of certain words within a paragraph using CSS solely, without applying any HTML tags to those particular words? Awaiting a positive response. Thank you! ...
I'm currently working on creating a folder named "build" that will house numerous map files and JavaScript files. However, I've encountered the following issue. Snippet of the code: "scripts": { "prestart": "d2-manifest package.json manifes ...
After conducting thorough research, I've discovered that there is no direct way to capture user input using Selenium. In an attempt to work around this limitation, I have implemented a JavaScript event listener. Unfortunately, upon executing the code ...
Authentication with JWT in Node.js: const expressJwt = require('express-jwt') function setupAuth() { const secret = process.env.SECRET_KEY return expressJwt({ secret, algorithms: ['HS256'] }) } module.expor ...
The main idea behind my project is quite simple. I have a grid of company logos extracted from an XML document using XSLT, each logo with its own unique link to the respective company profile. On the same page, I have a separate div that serves as a "prev ...
I am encountering a common issue in my Angular 4 or 2 project. Whenever I initialize a variable inside a subscribe function, there is a delay before it gets assigned a value. The problem arises when I try to use this variable in the HTML template using *ng ...
I've been working on implementing infinite scroll functionality for my card elements. Within my data.service file, I have a variable called reload that is utilized to determine whether more data needs to be loaded. This variable is set to true when th ...
I'm attempting to show a remove icon on a grid display when the user hovers over it with their mouse. this.state = { action: [], } <div> {this.state.action.map((value, index) => { return ( <div key={index} onMouseEnte ...
I am currently learning Selenium Webdriver. I am facing an issue where I can't run a script with imported classes, but I am able to run it without classes using import functions only. To execute it, I use babel-cli in the following manner: node ./babe ...
I'm looking to incorporate a new feature from this library on GitHub into my Angular project, which will enhance my ChartJS graph. @ViewChild('myChart') myChart: ElementRef; myChartBis: Chart; .... .... const ctx = this.myChart.nativeEleme ...
I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while ...
In the process of developing a MERN full stack application, I encountered a scenario where the frontend initiates an api call to "/createDeckOfCards" on my NodeJS backend. The main objective is to generate a new deck of cards upon clicking a button and the ...
Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...