I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>
Related
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)
Below is my code, after searching so much over the internet; i am not able to do this simple thing of validation.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myText').click(function(){
$('#radio1').removeAttr('disabled','disabled');
$('#radio2').removeAttr('disabled','disabled');
$('#radio3').removeAttr('disabled','disabled');
$('#submit').removeAttr('disabled','disabled');
})
});
</script>
</head>
<body>
<input type="checkbox" id="myText" value="Click it!">Click it!</input>
<br/>
<br/>
<input type="radio" id="radio1" name="gok" value="Radio 1" disabled="disabled"> Radio 1</input>
<br/>
<input type="radio" id="radio2" name="gok" value="Radio 2" disabled="disabled"> Radio 2</input>
<br/>
<input type="radio" id="radio3" name="gok" value="Radio 3" disabled="disabled"> Radio 3</input>
<br/>
<button type="button" id="submit" disabled="disabled"> Submit</button>
</body>
</html>
The checkbox above when checked; the radio buttons gets enabled and submit button is also enabled. I dont think this is a optimized solution; Please help me get a code which has optimized version like
1) if i keep radio & submit buttons in a div and try using the id of div and inside radio buttons are enabled
2) In jquery, i can run a iterator kinda thing which will reduce my code of lines
Thanks in advance!!!
Javascript:
$(document).ready(function(){
$('#myText').click(function(){
$('#enableMe').children().removeAttr('disabled'); // or $('#enableMe').children().prop('disabled',true/false')
});
});
html:
<div id = 'enableMe'>
<input type="checkbox" id="myText" value="Click it!">Click it!</input> <br/> <br/>
<input type="radio" id="radio1" name="gok" value="Radio 1" disabled="disabled"> Radio 1</input> <br/>
<input type="radio" id="radio2" name="gok" value="Radio 2" disabled="disabled"> Radio 2</input> <br/>
<input type="radio" id="radio3" name="gok" value="Radio 3" disabled="disabled"> Radio 3</input> <br/>
<button type="button" id="submit" disabled="disabled"> Submit</button>
</div>
You can just do
$('#myText').click(function(){
// if this is all you are going to have in your html just
// $(this).siblings().prop('disabled',false) would work
$(this).siblings('input[type=radio],#submit').prop('disabled',false);
})
http://jsfiddle.net/cj3zY/
fyi you're using removeAttr wrong -
$('#radio1').removeAttr('disabled'); //<-- should be how you use it..
But you should really be using .prop if you are on jQuery 1.6+
$(element).prop('disabled',true/false);
.prop() documentation
Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method.
If you want to toggle the disabled property depending on the checkbox.. you can do it like this
$('#myText').click(function(){
$(this).siblings('input[type=radio],#submit').prop('disabled',!this.checked);
})
http://jsfiddle.net/cj3zY/1/
Instead of using an id for each element use the class attribute.
Try this - DEMO
I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...
Don't dismiss this as a newbie question! It's not, I'm not, I've tried everything, and its a complex/convoluted environment that my code is in.
Okay - here goes. I'm adapting someone else's html/js/css code and trying to get it to work on my server (I've taken permission - please, no comments on that). The main html generates a overlaid form which has a checkbox which is unchecked that I need to mark as checked before presenting to the user.
The checkbox code is just:
<input type="checkbox" id="type" />
<label for="type" id="disable">Disable check</label>
I've tried changing the above to ALL of the following (AND doing Ctrl+F5 when trying it out on the browser):
<input type="checkbox" id="type" CHECKED/>
<input type="checkbox" id="type" checked>
<input type="checkbox" id="type" checked="checked"/>
<input type="checkbox" id="type" checked="checked" value="1"/>
<input type="checkbox" id="type" value="true" checked>
<input type="checkbox" id="type" name="tempname" checked="checked"/>
<input type="checkbox" id="type" checked=true/>
At the end of the page: <script type="text/javascript">document.getElementById("type").checked=true;</script>
The problem COULD be elsewhere - something somewhere COULD be setting it to a default value of unchecked, but (a) that's a bit unlikely, and (b) I did look at the accompanying js code but no luck on a preliminary search.
Thoughts? 'cause I'm all out... :(
It's a fairly simple question, if only because checkboxes are fairly simple things :)
If
<input type="checkbox" id="type" name="name" checked="checked"/>
doesn't work then I would strongly suggest taking a bigger dig through the javascript being loaded on the page.
Have you looked into the JavaScript to see if there is code that is marking the checkbox unchecked onclick?