1

最初の 1 つがオンになっている 4 つのラジオ ボックスのグループを想定します。次に、ユーザーは 3 番目のラジオ ボックスをクリックします。最初のラジオが最後にチェックされたものであることを知る方法はありますか?

4

3 に答える 3

2

mousedownの代わりにイベントにバインドするとclick、チェックされたラジオは、イベント リスナーの実行時にまだ変更されていません。

<fieldset id="radios">
    <input type="radio" name="rad" value="1"> option 1<br>
    <input type="radio" name="rad" value="2"> option 2<br>
    <input type="radio" name="rad" value="3"> option 3<br>
</fieldset>

var radios = document.getElementById('radios');
radios.addEventListener('mousedown', function(e) {
    var clicked = e.target;
    var current = document.querySelector('input[name=rad]:checked');
});

http://jsfiddle.net/ej6WD/

注: このソリューションは IE8+ です。http://caniuse.com/#search=queryselector を参照してください。

于 2013-02-26T18:56:57.610 に答える
2

1) Declare a global variable

var currentlySelected = null;

2) Attach an handler to the click event of all radio buttons.

function radioButtonOnClickEvent() {
    if (currentlySelected === null) { 
        // nothing has been selected yet
        currentlySelected = radioBoxThatWasJustClicked;
    } else if (currentlySelected === theThirdRadioButton) {
         //your logic here
         currentlySelected = radioBoxThatWasJustClicked;
    }
}
于 2013-02-26T18:58:27.677 に答える
1

はい、それを行う方法があります。コードと完成したスクリプトを追加して、最後の選択ラジオ ボタンを取得しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test webservices</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

    <script>
        $(document).ready(function () {

            $('input[name="rad"]').click(function (e) {
                if($(this).siblings('input[name="rad"]').hasClass('lastSelected'))
                {
                    var lastSelectedButton = $('.lastSelected').val();
                    $(this).siblings('input[name="rad"]').removeClass('lastSelected');
                    $(this).addClass('lastSelected');
                }
                else
                    $(this).addClass('lastSelected');
            });
        });

    </script>
</head>
<body>
    <form action='xyz.php' method='get'>
        <input type="radio" name="rad" value="1"> option 1<br>
        <input type="radio" name="rad" value="2"> option 2<br>
        <input type="radio" name="rad" value="3"> option 3<br>
        <input type='submit' value='Go' id='submit' >
    </form>

</body>
</html>

これはあなたの質問に対する完璧な答えです。このスクリプトをコピペするだけで実装してみることができます。

于 2013-02-26T19:21:32.727 に答える