通过点击单元格代码来选择单选按钮在Chrome中工作，而不是在Firefox中

HTML: selecting radio-button by clicking on cell - code working in Chrome, not in Firefox

本文关键字：Chrome 工作 Firefox 单选按钮 单元格 代码 选择      更新时间：2023-09-26

这是我的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>

这是不工作的jsfiddle在Chrome浏览器。

或者也许你知道另一种方法来获得单选按钮选择时，推/点击单元格?

非常简单，无需JavaScript!用<label>来扭曲input

: 

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

但是有一点缺点——用户只能在文本中点击，不能在空白区域点击——这比只点击单选按钮要好得多。http://jsfiddle.net/vitaly_zdanevich/qcbqtxh9/

…或者你可以按我的意愿去做。: -)在所有表格单元格的javascript调用中添加"this":

<th onclick="handleRadioRow(this)">

然后将js-function更新为以下内容(假设您正在使用jQuery)

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

这是一个jSFiddle: http://jsfiddle.net/kggys40k/

我不知道为什么这个函数当保存在javascript块不工作在小提琴。所以我把它保存在html块本身里面使用脚本标签和测试。

p。S:在调用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>
相关文章：