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

1
Vitaly Zdanevich 19 sierpień 2014, 12:36

4 odpowiedzi

Najlepsza odpowiedź

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/

0
Vitaly Zdanevich 19 sierpień 2014, 09:14

... 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>
0
Carl-Martin Hellberg 19 sierpień 2014, 09:45

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 ().

0
RahulB 19 sierpień 2014, 09:49

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>
0
Kuldeep Singh 19 sierpień 2014, 10:57