无法使用 javascript 运行 html 单选按钮答案

【问题标题】：cant use javascript to run html radio button无法使用 javascript 运行 html 单选按钮
【发布时间】：2012-11-27 08:00:05
【问题描述】：

我的

中有这个脚本：

<script>
var rad = document.getElementsByName('search_type');
alert(rad[1]);
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
        alert(this.value);
    };
}
</script>

这是我的表格：

<form name="search_form" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
    <table border="0"> 
        <tr>
            <td class="input">
                <input type="radio" name="search_type" value="search_code" checked>1st type<br>
                <input type="radio" name="search_type" value="search_title">2nd type<br>
                <input type="radio" name="search_type" value="search_filter">3rd type<br>
            </td>
        <tr/>
    </table> 
</form>

但所有警报都不起作用。我在控制台中没有错误。请帮忙。

【问题讨论】：

标签： javascript forms radio-button

【解决方案1】：

您在单选按钮的 HTML 代码被解析之前运行脚本。

将脚本放在表单下方，或者在加载事件中运行代码：

window.onload = function() {

  var rad = document.getElementsByName('search_type');
  alert(rad[1]);
  var prev = null;
  for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
      (prev)? console.log(prev.value):null;
      if(this !== prev) {
        prev = this;
      }
      console.log(this.value)
      alert(this.value);
    };
  }

};

【讨论】：

谢谢！我把它放在表格下面，效果很好。现在请带我到一些有据可查的 StackOverflow 页面，人们要求通过此单选按钮值控制第二个表单元素的能力禁用。
@MrCode：是的，你是对的，我纠正了这一点。太习惯写 jQuery ready handlers... :/
但这还有一个问题。 this 和 prev 总是相同的。如何获取真正的 prev 价值？
@PedarJepeto：当我尝试时，它们是不同的。由于prev 最初是null，它不能与任何元素相同，并且由于prev 仅在与this 不同时才被分配一个值，所以它必须不同才能被分配任何东西.
但我看到它们与我运行代码时完全一样。我不知道更多关于javascript。请帮忙

【解决方案2】：

你可以用一些 jQuery 来简化你的代码：

$(document).ready(function() {
    var rad = $('[name="search_type"]');
    console.log(rad);
    var prev = null;
    rad.click(function() {
        console.log(prev, $(this).is(':checked'));
        if (this !== prev) {
            prev = this;
        }
        console.log(prev, $(this).is(':checked'));
    });
});

http://jsfiddle.net/f2aDK/

【讨论】：

谢谢。这才是重点。但是 this 和 prev 得到了相同的值。如何获取真正的 prev 值？

【解决方案3】：

在表单之后移动它的脚本。在浏览器解析 DOM 元素之前，javascript 无法读取 DOM。

<form name="search_form" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
    <table border="0"> 
        <tr>
            <td class="input">
                <input type="radio" name="search_type" value="search_code" checked>1st type<br>
                <input type="radio" name="search_type" value="search_title">2nd type<br>
                <input type="radio" name="search_type" value="search_filter">3rd type<br>
            </td>
        <tr/>
    </table> 
</form>

<script>
var rad = document.getElementsByName('search_type');
alert(rad[1]);
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
        alert(this.value);
    };
}
</script>

【讨论】：

谢谢。这才是重点。但是 this 和 prev 得到了相同的值。如何获取真正的 prev 值？

【解决方案4】：

首先添加jquery库

 $(document).ready(function () {
             $('[name="search_type"]').live('click', function (event) {
                     var rad = document.getElementsByName('search_type');
                        alert(rad[1]);
                       var prev = null;
                       for (var i = 0; i < rad.length; i++) {
                           rad[i].onclick = function() { 
                               (prev)? console.log(prev.value):null;
                               if(this !== prev) {
                                prev = this;
                                }
                              console.log(this.value)
                              alert(this.value);
                            };
                        }
    });
    });

【讨论】：