Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements.

I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div.

However, I'm facing trouble with removing the "selected" class from the other children within the same parent when one option is selected.

This is my current JavaScript code:

$('.option').click(function() {
    $('input', this).prop("checked", true);
    $(this).addClass('optionSelected');
}

http://jsfiddle.net/S7Js8/

htmljquerycssradio-button

Answer №1

Utilize the siblings() method to specifically target divs that are siblings,

$('.choice').click(function() {
    $('input', this).prop("checked", true);
    $(this).addClass('selectedChoice')
           .siblings()
           .removeClass('selectedChoice');
});​

FIDDLE

Answer №2

Give this a shot:

$('.selection').on('click', function() {
    $(this).parent().find('.selection').removeClass('selected');
    $('input', this).prop("checked", true);
    $(this).addClass('selected');
});

If all the choices are related, you can try this approach:

$('.selection').on('click', function() {
    $(this).siblings('.selection').removeClass('selected');
    $('input', this).prop("checked", true);
    $(this).addClass('selected');
});

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

Adding Items to the Beginning of a Drop-down List using jQuery.prepend

I have created a select list for various types of restaurants. Users can choose a food type, click search, and receive a list of restaurants specializing in that particular cuisine. To add an initial option to the select dropdown, I used the following cod ...

jqueryhtml

IE8 encountering issues with Jquery ajax() request

My current issue involves submitting data using ajax from forms with a class of ajax. This functionality works flawlessly in Firefox, Safari, and Chrome, but is unsuccessful in Internet Explorer. ajax: function() { $('form.ajax').live(&apo ...

javascriptjqueryajaxinternet-explorer

Forms for uploading and submitting multiple files

On my single page, I have several file upload forms that are generated in a loop. The issue is that the first file upload control works fine, but the others do not. <div> <form action="/docs/1046/UploadDocument?Id=1046&amp;propertyTypeId ...

javascripthtml

Error message: The function for the AJAX call is not defined

I'm currently working with jQuery's ajax function and encountering an error: 'getQty is not defined' Can you spot my mistake here? jQuery Code: function getQty() { var dataString = "itemId=" +$(".itemId").val(); $.ajax({ t ...

javascriptjqueryajax

Quantifying the passage of time for data entry

Looking to create a quiz form where I can track how long it takes users to input/select answers. I attempted the following code but the timing seems off: $('input, select').on('focus', function(event) { el = $(this); name ...

javascriptjquerytimemeasure

Is it possible to restore the text to its original state?

Currently, I'm working on creating a simple website for server users to order items. However, I've encountered an issue related to the Navigator text. Here is how it currently appears: Upon inspecting the code below, you'll notice that the ...

htmlcss

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website: The navigation bar should remain fixed at the bottom of the window until you start scrolling. I am unsure if this can be done using just CSS, but I have made some progress ...

jqueryhtmlcss

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

jqueryhtmlcssjquery-ui

Executing code on the server-side (back-end) using Javascript: A step-by-step guide

Imagine wanting to execute JavaScript on the server side instead of exposing the code to the client. For example: Starting with the JS native window Object from the browser. Performing all JavaScript processing in the backend by passing the window Object ...

javascriptjquerynode.jsserver-sideserverside-javascript

Passing boolean data from JQuery to PHP can be done by sending the data

When using ajax to send data from jquery to php, I am encountering an issue where Boolean data sent through jquery is received by php as a string. However, I want the Boolean data to be recognized as Boolean on the php end. Below is the code snippet: $.a ...

phpjqueryajax

The pesky bug in my jQuery checkbox feature

Having trouble resolving a bug where unchecking the square, then red, and rechecking red brings back the red square. Need help preventing any unchecked shapes from being added back when the user toggles colors. My actual project involves many more checkbo ...

jquery

Resizing images in HTML can sometimes lead to extra white space appearing underneath the

I am facing an unusual scaling issue with my website design. Whenever I resize the browser window horizontally, the image scales correctly, but it leaves a white space below it where the rest of the page should start from if the window is large. I'm ...

htmlcss

Sortable jQuery div designed to resemble a chessboard

I am currently using the sortable() function in jQuery to create a grid-like "chessboard" within a div. My goal is to allow users to drag and drop sortable items into predetermined spaces, similar to a chess board. In addition to the basic sortable example ...

jqueryjquery-ui-sortable

What is the best way to update the switchery checkbox after it has already been initialized?

I have set up the switchery using the code snippet below. var ss_is_schedule_edit = document.querySelector('.ss_is_schedule_edit'); var mySwitch = new Switchery(ss_is_schedule_edit, { color: '#8360c3' }); However, I am unable to toggle ...

javascriptjqueryswitchery

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

I currently have a router set up in my application: var mainmodule.config(function($routeProvider){ $routeProvider.when('/home',{ templateUrl:'src/home/home.html' }; $routeProvider.when('/home/sports',{ ...

cssangularjsgulpangular-routing

Using PHP variables in HTML frameset URL for dynamic content passing

Looking for help to pass a PHP variable through a frameset URL. I've been trying different techniques without success so far. Can anyone provide some guidance? Here is an example of my code and what I have attempted: <?php $var = 2+3 ?> < ...

phphtmlhtml-frames

Exploring ways to validate the existence of a class in HTML table elements

If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them, This is what I have tried. However, it did not work as expected. How can I make this work correctly? What am I missing her ...

javascriptjqueryhtmlcss

Classify JavaScript Array Elements based on their Value

Organize array items in JavaScript based on their values If you have a JSON object similar to the following: [ { prNumber: 20000401, text: 'foo' }, { prNumber: 20000402, text: 'bar' }, { prNumber: 2000040 ...

javascriptjqueryjson

Stop Bootstrap 4 from automatically wrapping columns to the next row

I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...

cssbootstrap-4grid-layout

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml