I have three custom buttons and they works like a radio.
I wanted to add something extra in this but I am not figuring out how .
There are three buttons currently (can be more) I can select only one . If I select any one color of the button will change and will show as it is active. I am wanting if I again click on this selected button this will unselect.
It should stay as a radio type but on addition I am wanting above requirement.
HERE is my JS fiddle DEMO
JS
$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').removeClass("active");
$(this).toggleClass("active");
});
The problem is that you remove the active class before the toggle, so it doesn't remove it, you can change your code to this:
$('.toggleButtonRadio').click(function(){
$(this).toggleClass("active");
$('.toggleButtonRadio').not(this).removeClass("active");
});
JSFiddle Demo
Related
I am not good at Jquery but trying to fix something, I have a toggle function showing the div on checking a checkbox and hide the div on un-checking the checkbox, in the div I have radio button value LEFT, WHOLE, RIGHT. What Im trying to do is when someone check the checkbox it toggle the div and "WHOLE" option should select by default from radio box and this option deselect when toggle is hidden.
I have below code
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
$("input:radio[value='whole']").attr('checked',true);
});});
Problem is when toggle show the div it check the WHOLE in button but it effect on all other hidden divs. I want to select WHOLE only for that div which is toggled and rest are remain unchecked.
I have searched the whole internet but not found anything, again I am not Jquery expert I am internee.
http://dhowcruisemarina.com/pizza/product/build-your-own-pizza/ here once you check the Olives from the option "VEGGIES & GOOD STUFF " all its options (radio buttons) will toggle and I want to check WHOLE only for olives. In my case all other hidden divs options are selected as WHOLE and shows in the Checkout Page.
You need to target the specific radio button.
$("input:radio[value='whole']") This targets every radio input with a value of 'whole'
I can't give the exact answer without seeing your HTML but basically you need to target the radio button with a value of whole in the specific div only like this
$("#divId > input:radio[value='whole']")
https://api.jquery.com/child-selector/
I use this very nice plugin in my project called jQuery Dropdown Check List (https://code.google.com/p/dropdown-check-list/) specifically one of example which is named: 'Single select with radio buttons instead of checkboxes'.
One big problem with this example is that I am not able to (I was trying to do this by jQuery) set radio button unchecked. I was using for example:
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
And unfortunately nothing. Can anyone give some advice how fix this thing?
Try this:
- For check:
$("input:checkbox").attr("checked", "checked");
or
$("input:checkbox").prop('checked', true);
-For uncheck:
$("input:checkbox").removeAttr("checked");
or
$("input:checkbox").prop('checked', false);
I tried both methods in the demo page(http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html) for the "Single select with radio buttons instead of checkboxes", and turns out to be fine: the selected radio button has removed. However, the value stays in the span because remove selected radio cannot remove selected value.
My suggestion is that after you uncheck the radio, also set a html space to the span, it removes the selected value and also keep the height of its container.
This plugin uses checkbox not radio inputs so you must use $('input:checkbox') or $('input[type="checkbox"]') as your selector!
Click here to see a demo!
I know we can't make readonly radio button and checkbox. I tried to disable radio button and checkbox but in IE it is not visible.
Is any alternative way to do the same like disabled / readonly using jQuery, CSS, JavaScript?
You can use the following code to avoid clicks on elements you don't want user to change
$(':radio,:checkbox').click(function(){
return false;
});
You can use proper selector to limit the clicks.
Yon can write like this:-
in your script:
jQuery('#radio').attr('disabled','disabled');
or you can add class according to you..
if it will not compatible with IE give compatibility also..
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
then check..
you can also try this:
jQuery("#youridname input:radio").attr('disabled',true);
selectedRow
.find('input[type="radio"]:not(:checked)')
.each(function(){
$(this).attr('disabled', true);
});
selected row is just the HTML element below which I want to locate the radio buttons I am interested.
the whole script is only called once a radio button has been selected.
when executed, it locates the unselected radio buttons and disables them.
hence, giving me the desired result of disabling the non-selected radio buttons, while maintaining the selected option.
this result seemed to be a better option, then
1. laying an image over the radio button, to avoid the user from selected another option.
2. .click(function(){ return false; }), which just hides the selection when the unselected option is selected
3. disabling all the radio buttons, where the selection is lost.
hope this helps you,
cheers.
If radio button is already checked and if you click on checked radio button it change value from true to false. For this scenario following code works
$(document).ready(function () {
$('input[type = "radio"]').change(function () {
this.checked = false;
});
});
I have 2 divs which I show or hide depending on a button click event.
I use the .hide() and .show() jquery methods.
One of the divs has two radiobuttons.
when this particular div is hidden and then shown the radiobutton selection is lost.
Can someone help please.
I can't reproduce this problem. Check this fiddle http://jsfiddle.net/qAs9x/3/ - the value of radio group stays the same after hide/show.
I'm posting the link where I am having the problem. I'm having issues with the radio buttons.
I have three images and I'm suppose to be able to click on a radio button and the image changes. That part works great. But when I go for another button, the last one I clicked on stays checked. How do I make it uncheck? I only want what is selected to be checked. ty!!!!!
http://www-desi.iro.umontreal.ca/~valiquki/tp3Kim/TP3KimValiquette.html
The radio buttons have to have the same "name" attribute to be a part of the same group.
Make sure that all of the radio buttons are in the same group. See this for how to do so.
Basically, use the name attribute to assign a group name. That way they will be part of a group and the browser will handle selection/deselection. Name is not the name of the radio button, but the name of the group.
You could use 'side-dishes' if you like for all of them.