To jest mój 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>
I to jest mój 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>
Nie działa w Jsfiddle w Chrome też.
A może znasz inną metodę, aby uzyskać wybrany przycisk radiowy, gdy naciśnij / kliknij komórkę?
4 odpowiedzi
Bardzo prosty i bez JavaScript! Po prostu opakuj input za pomocą <label>
Przed:
<th onclick="handleRadioRow()"><input type="radio" name="date" value="08-14">August 14<br></th>
Po:
<th><label><input type="radio" name="date" value="08-14">August 14<br></label></th>
Ale z małym minus - użytkownik może kliknąć tylko w tekst, nie na pustych przestrzeniach - jest znacznie lepszy niż tylko do radia. http://jsfiddle.net/vitaly_zdanevich/qcbqtxh9/
... albo mógłbyś zrobić, jak życzył na pierwszym miejscu. ;-) Dodaj "to" do połączenia JavaScript dla wszystkich komórek tabeli:
<th onclick="handleRadioRow(this)">
Następnie zaktualizuj funkcję JS do następujących (biorąc pod uwagę, że używasz jQuery)
<script type="text/javascript">
function handleRadioRow(el) {
var radioBtn = $(el).find('input').first();
radioBtn.prop('checked',true);
}
</script>
Możesz spróbować
function handleRadioRow(obj) {
$(obj).find('input:radio[name=date]').prop('checked',true);
}
Oto jsfiddle: http://jsfiddle.net/kgys40k/
Nie wiem, dlaczego ta funkcja, gdy trzymana w bloku JavaScript nie działa na skrzypce. Więc trzymałem go wewnątrz blokowania HTML w środku przy użyciu znacznika skryptu i testowane.
P.S: Użyj Słowo kluczowe podczas wywołania funkcji HandlerDiadom ().
Jeśli nie chcesz używać jQuery itp ...
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();
}
I używaj go jako
<th onclick="handleRadioRow(event)"><input type="radio" name="date" value="08-14">August 14<br><?php echo($price) ?></th>