二度押しで選択解除できるラジオボタン

By | 2015/08/31

解除できるラジオボタンを設置したいときもあります。

解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。

ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。
JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。






<script>
$(function(){
    var nowchecked = $('input[name=xxxx]:checked').val();
    $('input[name=xxxx]').click(function(){
        if($(this).val() == nowchecked) {
            $(this).prop('checked', false);
            nowchecked = false;
        } else {
            nowchecked = $(this).val();
        }
    });
});
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です