UniformJS radio buttons not clickable - javascript

I've used UniformJS before and am having an issue with radio buttons this time around. I have uniform initialized for only checkbox and radio, and I can check/uncheck checkboxes just fine. My radio buttons are stylized but not showing as clicked. I have no errors in the console, and I'm not sure what the issue could be. I copied the exact radio inputs from the working fiddle, with no luck. http://jsfiddle.net/Wp9kx/ When giving the attribute checked in the tag, it appears as clicked but will not unclick. It seems the click isn't getting pushed through the styling.Any ideas?
$("input[type=checkbox], input[type=radio]").uniform();

This will happen if your radio isn't inside a label.
This works:
<label>
<input type="radio" value="option1" />option 1
</label>
This doesn't:
<input type="radio" value="option1" />option 1
Here is the bug report.

Related

setting radio button checked under multiple tabs

i have few tabs and each tab has same radio button groups like this
see case#1 has radio buttons name="managerid" and with class="managerid
<label>
<input type="radio" name="managerid" class="managerid managerid_8" data-radio="iradio_square-grey" value="8">
Spam Dead
</label>
<label>
<input type="radio" name="managerid" class="managerid managerid_9" data-radio="iradio_square-grey" value="9">
Stewart Stephenson
</label>
these are dynamically generated tabs and radio buttons
now i want to set radio button checked in each tabs with the value
this is how im doing
$.each($("#tab_"+r.id).find(".managerid"),function(i,v){
if(v.value === r.managerid){
v.checked = true;
}
});
i know the id of the tab so i find() the managerid and set them checked if the value matches
the problem is that it sets radio checked on the last tab only
how do i set radios checked on each tab with different values
I would suggest you to assign different style class to radio button controls and that is a better possible way to select/deselect across multiple tabs

Check radio button if another radio button is checked

New to the angular js need to know how to check radio button 'B' if Radio button 'A' is checked?
My code
<input type="radio" name ="employeeData.seatChange1" ng-model="employeeData.seatChange" value="yes" > A
<input type="radio" name ="employeeData.seatChange" ng-model="employeeData.seatChange" value="no" > B
<input type="radio" name ="employeeData.seatChange3" ng-model="employeeData.seatChange" value="no1" > C
see https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
you'll want to have multiple radio buttons, each with it's own value to set some property to (although this is weird for a yes no you are better off with a checkbox, but if you had multiple values this is how radio buttons work)
<input type="radio" ng-model="employeeData.seatChange" ng-value="true" />A
<input type="radio" ng-model="employeeData.seatChange" ng-value="true" />B
when you have just one radio button, if it is not checked by default or you have no ng-value it will be undefined, but also having only one radio button, you could never unselect it.
Try this, Hope this Helps.
If you want to check both radio button ,rather than using radio button go for check box ,as I don't know why you are using radio button its better to use check box radio button.
If you want to use Radio button only then in the Don't use name as if name is used both radio button is grouped so one is checked then automatically other also unchecked which is default.So as VikrantMore says you can avoid name.
My advice as per requirement go for check box.

In jquery How to find the radio button Value which is in the inner div while chicking on radio button

How to find the radio button Value in inner div while clicking on radio button
Hi i have a radio button i want to
find out the value of the radio button when clicking on that radio button in jQuery:
Please see here my problem http://jsfiddle.net/c857P/232/
jsFiddle Demo
You're missing the class="vvradiobtn" for your radio buttons
<input type="radio" name="VVradio" class="vvradiobtn" id="radio1" value="1">
<input type="radio" class="vvradiobtn" name="VVradio" id="radio2" value="2">
I see a few duplicate IDs in your DOM. I suggest to use unique IDs for your html elements.

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)
jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.
First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.

How to change the radio button selection in IE 7?

I am using Knockout javascript library, and I run into this problem: I am unable to change the radio button selection in IE7.
For example, on my page, I am unable to change the radio button selection using IE 7 the way the controlTypes example does it.
Is there a fix to this problem?
I've found the solution. By adding the name attribute with same value (name="planetType", see below) for all the radio buttons in the group, IE will also be happy...
<label><input type="radio" value="all" data-bind="checked: typeToShow" name="planetType" />All</label>
<label><input type="radio" value="rock" data-bind="checked: typeToShow" name="planetType"/>Rocky planets</label>
<label><input type="radio" value="gasgiant" data-bind="checked: typeToShow" name="planetType"/>Gas giants</label>

Categories