jquery - RadioButton wont set checked javascript - Stack Overflow

admin管理员组

文章数量:1333710

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

• javascript
• jquery

Share Improve this question Follow edited Jan 25, 2016 at 6:02 Ruby asked Jan 25, 2016 at 3:53 RubyRuby 25111 gold badge66 silver badges1414 bronze badges 9

• checked=checked stackoverflow./questions/5665915/… – Daniel Tate Commented Jan 25, 2016 at 3:55
• You have used the attribute of name not id in this line document.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

 |  Show 4 more ments

7 Answers 7

Sorted by: Reset to default 1

maybe 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 and else if, so you needed an else.

  • When you have 2 if-ish conditionals, then use if and else,
  • and if you have more than 2, then start with if continue using else if until the last conditional being else.

• 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