Javascript 和 HTML - onclick答案

【问题标题】：Javascript and HTML - onclickJavascript 和 HTML - onclick
【发布时间】：2011-06-16 23:16:15
【问题描述】：

假设我有以下创建两个单选按钮的代码：

<li id="foli517"        class="     ">
<label class="desc" id="shippingChoice" for="Field517_0">
    Shipping Options
        </label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
    <span>
<input id="shipping1"       name="Field517"         type="radio"        class="field radio"         value="$2.00 Shipping Fee"      tabindex="13"                        checked="checked"                      />
<label class="choice" for="Field517_0"      >
    $2.00 Shipping Fee</label>
    </span>
    <span>
<input id="Field517_1"      name="Field517"         type="radio"        class="field radio"         value="I will pick up the items (free shipping)"        tabindex="14"                               />
<label class="choice" for="Field517_1"      >
    I will pick up the items (free shipping)</label>
    </span>
    </div>
</li>

我将如何实现一个 javascript 函数 onclick，当单击第二个单选按钮时，它会使用单词“FREE”更新 id 为“mySpan”的 span 的内部 html，否则会更新为“NOT FREE”？

document.getElementById(WHAT GOES HERE).onclick = function() { 
    //what goes here?
};

【问题讨论】：

能否改进一下代码格式？

标签： javascript html input onclick radio

【解决方案1】：

document.getElementById('foli517').onchange = function(e) {
    var e = e || event;
    var target = e.target || e.srcElement;
    var span = document.getElementById('mySpan');
    var span2 = document.getElementById('mySpan2');

    if (target.type === "radio") {
        span.innerHTML = (target.id === "Field517_1") ? "FREE" : "NOT FREE";
    }
    if (target.type === "checkbox") {
        span2.innerHTML = "Is it checked? " + target.checked;
    }
};

示例： http://jsfiddle.net/pEYnm/2/

【讨论】：

这非常有效。你能给我看一个复选框的例子吗？如何查看复选框设置为 true 还是 false？（点击或未点击）
@reising1：已更新。您用来获取检查状态的属性只是checked。
我目前有：var isChecked = this.checked;它总是错误的
如果你使用我上面的代码，它使用的是事件委托，所以处理程序在容器上。因此，您需要target.checked。如果您的代码不同，我需要查看该代码。

【解决方案2】：

我会添加 onclick="setSpan('FREE');"和 onclick="setSpan('NOT FREE');"到相应单选按钮的 HTML 然后添加一个 javascript 函数，如下所示设置跨度的 HTML。

function setSpan(text) {
   document.getElementById('mySpan').innerHTML = text;
}

【讨论】：

像这样？：
没错。我认为这样做比添加 onEvent 处理程序等更容易。
它似乎不起作用。我已经确认我的跨度 ID 是正确的。
您是否将我给您的函数名称更新为 setShippingSpan 而不是 setSpan？您是否将其包含在页面中？尝试使用谷歌浏览器或 safari 的开发者工具查看是否发生了 javascript 错误。

【解决方案3】：

请查看Working code of Radio button on click！

【讨论】：