I have been fumbling around with this problem for an hour now and I can't figure out why this strange behaviour in Radiobuttons occurs. The following is my code:
<label>Language
<input type="radio" id="de" value="de" onclick="switchRadioButtons(this);" >de
<input type="radio" id="en" value="en" onclick="switchRadioButtons(this);" >en
<input type="radio" id="other" value="other" onclick="switchRadioButtons(this);" >other
<input type="text" id="language" value="" /><br />
</label>
<script>
function switchRadioButtons(element) {
console.log(element.value);
</script>
So, in my opinion, whenever I click on either the value or the button itself, the value of the radiobutton should be written to the console. This works correctly for the button itself, but if I click on the label/description besides the button, it will always print "de" (the first item), no matter what I did (I also tried "switchRadioButtons(document.getElementById('other'));" with no effect).
Can anyone explain to my why this happens and maybe provide a solution?
You have all of your inputs inside the same label! If you click on it, it's gonna trigger the 1st element ('de'). It doesn't know that you wanted to trigger one of the other ones.
You need to have a separate label for each element.
add a group to your input
remove label enclosing inputs
autoclose input tags xHTML thingy...
Voilà it works :
http://jsfiddle.net/techunter/Z3fU7/
HTML
<label for="de">Deutch</label>
<input type="radio" name="lang" id="de" value="de" onclick="switchRadioButtons(this);" />
<label for="en">English</label>
<input type="radio" name="lang" id="en" value="en" onclick="switchRadioButtons(this);" />
<label for="other">Other</label>
<input type="radio" name="lang" id="other" value="other" onclick="switchRadioButtons(this);" />
<input type="text" id="language" value="" />
JS
function switchRadioButtons(element) {
console.log(element.value);
}
Related
i am using a single html5 required attribute for group of radio buttons as this
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" required value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" value="arabic" />
</td>
but its not working as per the expectaions
i am not able to submit the result until i select english i.e even when i select arabic "the reqired field message is prompted on english"
You need to add a name attribute for your Radio Button Group:
<input type="radio" ng-model="Customer.language" id="input1" value="english" name="language" required />
<input type="radio" ng-model="Customer.language" id="input2" value="arabic" name="language" required />
Note: i added the Required Statement for the second input as well.
I see some "ng-" in your component, so i think you use AngularJS.
So, you can try this one for your required :
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" ng-required="!Customer.language" value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" ng-required="!Customer.language" value="arabic" />
And name is not needed ;)
With that, your field will be required only if no value is selected ;)
I am sure this has been answered before but I am not able to find what I need. The jsfiddle below is a basic idea of what I am trying to do. I want the user to come to the page and the text/select fields are disabled.
If they select EITHER of the radio buttons in the 'radio' class, I want the disable attribute to be removed from all 3 fields in the 'fields' class. I have tried different onClick events and cannot seem to get it to work but I am not that familar with javascript and jquery.
Can anyone give me an idea of how I can make this happen?
http://jsfiddle.net/q5jqqgnt/
<input class="radio" name="radio" type="radio">Radio 1
<input class="radio" name="radio" type="radio">Radio 2
<br>Field 1
<input class="fields" disabled="disabled" name="field1" type="text">
<br>Field 2
<input class="fields" disabled="disabled" name="field2" type="text">
<br>Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
you need to remove the disabled attribute with the .removeAttr() function in jQuery
$('.radio').change(function(){
$('.fields').removeAttr('disabled');
});
JSfiddle demo
At its simplest, I'd suggest using prop(), rather than removeAttr():
$('.radio').on('change', function(){
$('.fields').prop('disabled', false);
});
$('.radio').on('change', function() {
$('.fields').prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" disabled="disabled" name="field1" type="text" />
<br />Field 2
<input class="fields" disabled="disabled" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
You could, in compliant browsers, also somewhat emulate the disabled property's presence, and removal, with just CSS:
.radio ~ input.fields {
pointer-events: none;
opacity: 0.4;
background-color: #ccc;
}
.radio:checked ~ input.fields {
pointer-events: auto;
opacity: 1;
background-color: #fff;
}
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" name="field1" type="text" />
<br />Field 2
<input class="fields" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
Unfortunately, while this works to prevent mouse-interaction (the user cannot focus the fields with via a mouse-click), they can still use the tab button to focus the field and enter text, and, of course, the form-elements would still be considered 'successful' (albeit with potentially empty-values), and would be submitted to the server when the form is submitted.
So, while potentially useful under some very specific circumstances, it's almost certainly not to be used for most situations.
References:
CSS:
pointer-events.
jQuery:
on().
prop().
i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.
Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>
I have a code like
<input type="checkbox" name="abc" value="A" class="chbx">
href1
<input type="checkbox" name="abc" value="b" class="chbx">
href2
<input type="checkbox" name="abc" value="c" class="chbx">
href3
What I desired is when I click on href1 checkbox 1st should be selected and when I click on href2, the 2nd checkbox should be selected.
How can this be done in jQuery ?
You could go about this in a different way and not use javascript at all
Try this:
<label><input type="checkbox" value="hello" name="chkbox1" /> Here is the text</label>
<label><input type="checkbox" value="hello" name="chkbox2" /> Here is the text</label>
<label><input type="checkbox" value="hello" name="chkbox3" /> Here is the text</label>
You don't need jQuery. You can use plain old html...
<input type="checkbox" name="abc" id="chk1" value="A" class="chbx">
<label for="chk1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" id="chk2" value="b" class="chbx">
<label for="chk2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" id="chk3" value="c" class="chbx">
<label for="chk3" class="checkbox-selector">href3</label>
To add support to older browsers (e.g. ie6 suggested by Fabricio) use the jQuery approach suggested by scessor:
$('.checkbox-selector').click(function() {
$(this).prev().prop('checked', true);
});
Note that you should implement both and only enable the javscript approach if you're using a browser that doesn't support labels.
If you use a label, it will automatically check the checkbox for you as long as you give the checkbox an ID and set the FOR attribute in the label.
<input type="checkbox" name="abc" value="A" class="chbx" id="c1">
<label for="c1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" value="b" class="chbx" id="c2">
<label for="c2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" value="c" class="chbx" id="c3">
<label for="c3" class="checkbox-selector">href3</label>
Any styles you applied to the former hyperlink should still apply to the label.
Fully working example which checks and unchecks the boxes on click:
$('.checkbox-selector').click(function() {
var chb = $(this).prev(); //caches selector
chb.prop('checked', !chb.prop('checked')); //inverses checked state
});
Fiddle
But honestly, unless you really need compatibility with older browsers such as ie6 and other non-html5 browsers, you should use the <label>s method.
If by name you meant the link's description, just use $(this).text() to get the clicked link's text.
Fiddle
You have to do this:
$('.checkbox-selector').click(function(){
$(this).prev().attr('checked', true);
});
I have a group of radio buttons on my page:
<form ...>
<input type="radio" name="people" checked> Student
<input type="radio" name="people"> Teacher
<input type="radio" name="people"> Assistant
<!-- Here is the dynamic content, which could be check boxes or radio buttons-->
</form>
The feature I would like to implement is:
Based on the selection of the radio buttons, the content after the radio buttons will change dynamically. (The radio buttons and the content are inside a form.)
For example:
If "student" is selected, the dynamic content part is (check boxes):
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
If "Teacher" is selected, the dynamic content part is (check boxes & radio buttons):
<input type="checkbox" name="subject" /> Subject <br />
<input type="radio" name="code" checked> 111
<input type="radio" name="code"> 222
<input type="radio" name="code"> 333
If "Assistant" is selected, the dynamic content part is other check boxes.
How to implement this dynamic content change in jQuery?
What I tried
I tried to create HTML elements dynamically in Javascript, but I feel it is not a good way since I have to write HTML elements in Javascript as strings.
Try this
Working demo
Markup change
<form ...>
<input type="radio" name="people" value="student" checked> Student
<input type="radio" name="people" value="teacher"> Teacher
<input type="radio" name="people" value="assistant"> Assistant
<div class="content student">
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
</div>
<div class="content teacher" style="display:none;">
Teacher content
</div>
<div class="content assistant" style="display:none;">
Assistant content
</div>
</form>
Js
$(function(){
$("input[name=people]").click(function(){
$("div.content").not("."+this.value).hide();
$("."+this.value).show();
});
});
put all three possible elements in your static html and wrap each part with a div. Then Show and hide the divs on click
If I understand your question correctly... I would create different divs that are hidden that contain the combinations that you are looking for. Then on the onclick of the radio button I would hide divs that you don't want shown and show the divs that you are looking for.