HTML：通過單擊單元格選擇單選按鈕-代碼可在Chrome（而不是Firefox）中運行

Question

這是我的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的jsfiddle中也不起作用 。

或者，也許您知道另一種在單元格上單擊/單擊時選擇單選按鈕的方法？

Answer 1

非常簡單，沒有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/

Answer 2

...或者您可以按照自己的意願做。 ;-)在所有表格單元格的javascript調用中添加一個“ this”：

<th onclick="handleRadioRow(this)">

然后將您的js函數更新為以下內容（假設您使用的是jQuery）

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

Answer 3

你可以試試

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

這是一個jSFiddle： http : //jsfiddle.net/kggys40k/

我不知道為什么當保存在javascript塊中時此功能無法正常工作。 因此，我使用腳本標記將其保留在html塊內部並進行了測試。

PS：調用handleRadioRow（）函數時，請使用此關鍵字。

Answer 4

如果您不想使用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>