Javascript HTML：通过点击单元格选择单选按钮-在Chrome中工作的代码，而不是在Firefox中

这是我的JavaScript：

<script>
    function handleRadioRow() {
        var t = event.target;
        if (t.tagName == "input")
            return;
        while (t.tagName != "th")
            t = t.parentElement;
        var r = t.getElementsByTagName("input")[0];
        r.click();
    }
</script>

这是我的HTML：

    <form action="order.php">
        <table border="1">
            <tr>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-14">August 14<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-15">August 15<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-16">August 16<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-17">August 17<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()" bgcolor="#00FF00"><input type="radio" name="date" value="08-18" checked="checked">August 18<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-19">August 19<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-20">August 20<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-21">August 21<br><?php echo($price) ?></th>
                <th onclick="handleRadioRow()"><input type="radio" name="date" value="08-22">August 22<br><?php echo($price) ?></th>
            </tr>
        </table>
    </form>

这在Chrome也不起作用

---

或者您知道在按下/单击单元格时选择单选按钮的另一种方法吗？

非常简单，没有JavaScript！只需使用

之前：

<th onclick="handleRadioRow()"><input type="radio" name="date" value="08-14">August 14<br></th>

之后：

<th><label><input type="radio" name="date" value="08-14">August 14<br></label></th>

但有了很少的减号——用户只能在文本中点击，而不能在空白处点击——这比只点击单选按钮要好得多。

---

…或者你可以先做你想做的事- 将此添加到所有表单元格的javascript调用中：

<th onclick="handleRadioRow(this)">

然后，在使用jQuery的情况下，将js函数更新为以下内容

<script type="text/javascript">
 function handleRadioRow(el) {
    var radioBtn = $(el).find('input').first();
    radioBtn.prop('checked',true);
  }
</script>

你可以试试

function handleRadioRow(obj) {
    $(obj).find('input:radio[name=date]').prop('checked',true); 
    }

下面是一个JSFIDLE：

我不知道为什么这个保存在javascript块中的函数在fiddle中不起作用。因此，我使用脚本标记将它保存在html块内部，并进行了测试

---

注意：在调用handleRadioRow函数时使用此关键字。

如果您不想使用jquery等

function handleRadioRow(event) {
    var t = event.target;
    if (t && t.tagName == "INPUT")
        return;
    while (t && t.tagName != "TH") {
        t = t.parentElement;
    }
    var r = t.getElementsByTagName("INPUT")[0];
    r.click();
}

并将其用作

<th onclick="handleRadioRow(event)"><input type="radio" name="date" value="08-14">August 14<br><?php echo($price) ?></th>

---

jsfiddle的链接如果您不使用jquery，为什么这个标签是jquery？对不起，是的，这是JavaScript，不是jquery，我修复了这个问题并添加了到jsfiddle的链接。我注意到对函数handleRadioRow的调用失败了。它从不在函数中运行。因此无法得到预期的结果。如果你有工作小提琴。