Question

我不知道为什么radiobutton不会设置检查。我尝试了所有可以找到的方法，但它不起作用。

我希望它如何工作是如果值为1，则设置Type1 radiobutton;如果值为0，则设置Type2 radiobutton。

我在文本字段中打印了该值。该值来自数据库btw。从数据库中获取值并在文本字段中打印它没有任何问题。

我唯一的问题是根据文本字段中的值设置单选按钮。

我在函数中放了一个alert（），但似乎它也不会显示警告。我认为它不会从commmon.js调用该函数。但是common.js中的其他函数可以工作。：/

这是代码;

common.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>

对于那些试图回答但仍无法工作的人：

我有另一个例子：想象一下编辑个人资料表格，还有男性和女性的单选按钮。如果在配置文件信息中为男性，则选中男性单选按钮，反之亦然。

这就是我想要发生的事情。但单选按钮不会设置检查。：（

更新

我现在找到了答案。感谢@ketan：D我只需要将函数放在body标签onLoad事件上以使其工作。：d

Answer 1

也许你的脚本在DOM节点准备好之前运行，尝试在标签和输入标签之后移动<script> SetRadiobuttonValue();</script>

Answer 2

使用JQuery

＆＃13;

$('#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');

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 3

<html>
<head>
<script src="http://code.jquery.com/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>

Answer 4

您的更新代码：只需更改一次即可查看我的评论

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;
        }
    }

//更多改进的答案：

var selected;
function SetRadiobuttonValue(){
     selected = document.getElementById('myType').value;
     $('input:radio[name="type"]').filter("[value=" + selected + "]").prop("checked", "checked");
}

demo

Answer 5

你只需要几行代码，你就非常接近：

您有2个条件if和else if，因此您需要else。
- 当您有2个if - ish条件时，请使用if和else，
- 如果您有2个以上，则从if开始继续使用else if，直到最后一个条件为else。
将var selected转换为数字：
- selected = parseInt(document.getElementById('admin').value, 10);
在文字输入上添加了eventListener。
使形式有点花哨。
BTW，下面的演示也是有用的。输入0并检查第一个无线电，输入1并检查第二个无线电。另一个条件“”（空字符串？）很难在更改或输入事件上复制。
您可以使用开发人员工具查看控制台输出。

注意：我将#myType更改为#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>

Answer 6

你可以这样试试。

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>

以下是Plunker

Answer 7

请尝试这个我在所有浏览器中运行此代码在此代码中onload javascript事件我调用ch（）函数在ch（）函数中我设置单选按钮是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>

RadioButton不会设置已检查的JavaScript

7 个答案: