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