admin管理员组文章数量:1335371
I dont know why the radiobutton wont set checked. I tried all the methods i could find but it won't work.
How I want it to work is that Type1 radiobutton is set checked if the value is 1; if the value is 0, Type2 radiobutton is set checked.
I printed the value in a textfield. The value is from a database btw. Nothing's wrong with getting the value from the database and printing it in the textfield.
My only problem is setting the radio buttons checked based on the value in the textfield.
I put an alert() in the function but it seems that it wont display an alert too. I think it doesn't call the function from the mmon.js. But other functions in mon.js works though. :/
Here's the code;
mon.js
var selected;
function SetRadiobuttonValue()
{
selected = document.getElementById('myType').value;
alert(selected);
if(selected == "" || selected == 0){
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
}else if(selected == 1){
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
}
}
form.jsp
<input type="text" id="myType" name="admin" value="${usersModule.adminFlag}" onChange=" SetRadiobuttonValue()">
<label><input type="radio" name="type" id="type1" value="0" > General User</label>
<label><input type="radio" name="type" id="type2" value="1" > Admin</label>
To those who tried to answer but still wont work:
I have another example: Imagine editing a profile form and there is the radio buttons of Male and Female. If it is Male in the profile info, the Male radio button is set checked or vice versa.
That's what i want to happen. But the radio button wont set checked. :(
UPDATE
I found the answer now. Thanks to @ketan :D I just have to put the function on body tag onLoad event to make it work. :D
I dont know why the radiobutton wont set checked. I tried all the methods i could find but it won't work.
How I want it to work is that Type1 radiobutton is set checked if the value is 1; if the value is 0, Type2 radiobutton is set checked.
I printed the value in a textfield. The value is from a database btw. Nothing's wrong with getting the value from the database and printing it in the textfield.
My only problem is setting the radio buttons checked based on the value in the textfield.
I put an alert() in the function but it seems that it wont display an alert too. I think it doesn't call the function from the mmon.js. But other functions in mon.js works though. :/
Here's the code;
mon.js
var selected;
function SetRadiobuttonValue()
{
selected = document.getElementById('myType').value;
alert(selected);
if(selected == "" || selected == 0){
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
}else if(selected == 1){
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
}
}
form.jsp
<input type="text" id="myType" name="admin" value="${usersModule.adminFlag}" onChange=" SetRadiobuttonValue()">
<label><input type="radio" name="type" id="type1" value="0" > General User</label>
<label><input type="radio" name="type" id="type2" value="1" > Admin</label>
To those who tried to answer but still wont work:
I have another example: Imagine editing a profile form and there is the radio buttons of Male and Female. If it is Male in the profile info, the Male radio button is set checked or vice versa.
That's what i want to happen. But the radio button wont set checked. :(
UPDATE
I found the answer now. Thanks to @ketan :D I just have to put the function on body tag onLoad event to make it work. :D
Share Improve this question edited Jan 25, 2016 at 6:02 Ruby asked Jan 25, 2016 at 3:53 RubyRuby 2511 gold badge6 silver badges14 bronze badges 9- checked=checked stackoverflow./questions/5665915/… – Daniel Tate Commented Jan 25, 2016 at 3:55
-
You have used the attribute of
name
notid
in this linedocument.getElementById('admin').value;
– John R Commented Jan 25, 2016 at 3:56 - I tried that checked=checked thing . It wont work – Ruby Commented Jan 25, 2016 at 4:00
- i didnt realize that i put the wrong id. I'll try to see if it works now. – Ruby Commented Jan 25, 2016 at 4:01
- It still wont work :( – Ruby Commented Jan 25, 2016 at 4:06
7 Answers
Reset to default 1maybe your script runs before DOM nodes are ready,try moving <script> SetRadiobuttonValue();</script>
after your label and input tags
With JQuery
$('#myType').on('input', function() {
var val = this.value;
var rdo = $('input[name=type]:eq(0)');
if (val)
rdo = $('input[name=type][value=' + val + ']');
rdo.prop('checked', true);
}).trigger('input');
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="myType" name="admin" value="0">
<label>
<input type="radio" name="type" id="type1" value="0">General User</label>
<label>
<input type="radio" name="type" id="type2" value="1">Admin</label>
Your updated code : just one change see my ment
var selected;
function SetRadiobuttonValue()
{
selected = document.getElementById('myType').value;
if(selected == "" || selected == "0"){ // change here --- 0 to "0"
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
}else if(selected == "1"){ // change here --- 1 to "1"
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
}
}
//More improved answer:
var selected;
function SetRadiobuttonValue(){
selected = document.getElementById('myType').value;
$('input:radio[name="type"]').filter("[value=" + selected + "]").prop("checked", "checked");
}
demo
You can try in this way.
JS :
window.onload = function(){
var selected;
var myType = document.getElementById('myType');
myType.addEventListener('change', function ()
{
selected = document.getElementById('myType').value;
alert(selected);
if(selected == "" || selected == 0){
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
}else if(selected == 1){
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
}
});
}
HTML :
<input type="text" id="myType" name="admin" value="1">
<label><input type="radio" name="type" id="type1" value="0" > General User</label>
<label><input type="radio" name="type" id="type2" value="1" > Admin</label>
Here is the Plunker
Your'e only a couple of extra lines of code away, you were very close:
You had 2 conditionals
if
andelse if
, so you needed anelse
.- When you have 2
if
-ish conditionals, then useif
andelse
, - and if you have more than 2, then start with
if
continue usingelse if
until the last conditional beingelse
.
- When you have 2
Made
var selected
into a number:selected = parseInt(document.getElementById('admin').value, 10);
Added an
eventListener
on the text input.Made the form a little fancy.
BTW, the demo below is functional as well. Enter a 0 and the first radio is checked, enter a 1 and the second radio is checked. The other condition "" (empty string?) is hard to replicate on a change or input event.
You can view the console output with developer tools.
Note: I changed #myType
to #admin
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SO34984810</title>
</head>
<body>
<form id="formSet" name="formSet" method="" action="">
<fieldset>
<legend>User Groups</legend>
<input type="text" id="admin" name="admin" value="">
<label>
<input type="radio" name="type" id="type1" value="0">General User</label>
<label>
<input type="radio" name="type" id="type2" value="1">Admin</label>
</fieldset>
<script>
function SetRadiobuttonValue(selected) {
var out1 = document.getElementById('out1');
selected = parseInt(document.getElementById('admin').value, 10);
console.log('selected: ' + selected);
if (selected === "" || selected === 0) {
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
console.log('type1: ' + document.getElementById("type1").checked);
} else if (selected === 1) {
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
console.log('type2: ' + document.getElementById("type2").checked);
} else {
console.log(selected + ' is INVALID');
return false;
}
}
document.getElementById('admin').addEventListener('input', function(e) {
var sel = this.value;
SetRadiobuttonValue(sel);
}, false);
</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery./jquery-1.10.2.js"></script>
<script>
function SetRadiobuttonValue() {
var selected;
selected = document.getElementById('myType').value;
if (selected == "1") {
document.getElementById("type1").checked = true;
document.getElementById("type2").checked = false;
} else if (selected == "0") {
document.getElementById("type1").checked = false;
document.getElementById("type2").checked = true;
}
}
</script>
</head>
<body>
<input type="text" id="myType" name="admin" value="" onChange=" SetRadiobuttonValue()">
<label><input type="radio" name="type" id="type1" value="0" > General User</label>
<label><input type="radio" name="type" id="type2" value="1" > Admin</label>
</body>
</html>
please try this i run this code in all browser in this code onload javascript event i call ch() function in ch()function i set radio button is checked the javascript
<html>
<head>
<title>check radio button</title>
<script type="text/javascript">
function ch()
{
document.getElementById("rd1").checked = true;
}
</script>
</head>
<body onload="ch();">
<input type="radio" name="rd1" value="radio1" id="rd1">radio1
</body>
</html>
本文标签: jqueryRadioButton wont set checked javascriptStack Overflow
版权声明:本文标题:jquery - RadioButton wont set checked javascript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742213936a2434220.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论