【JQuery】チェックボックスのようにラジオボタンでもチェックを外す方法

ラジオボックスだと一度クリックしてチェックされるとラジオボタンどうしのチェックの切り替えはできるけどラジオボタンをはずすということができなくなります。

チェックボックスではできるのですが。

今回はラジオボタンでもチェックをつけたりはずしたりできる方法を紹介していきたいと思います。

ラジオボタンでもクリックでチェックをはずす

html

<div class="radio">
	<input type="radio" name="name" value="inter" id="name01">
        <label for="name01" class="radio_label">item1</label>
        <input type="radio" name="name" value="publicsans" id="name02">
        <label for="name02" class="radio_label">item2</label>
        <input type="radio" name="name" value="lora" id="name03">
        <label for="name03" class="radio_label">item3</label>
</div>

jQuery

ラジオボタンがチェックされたときに条件分岐を行っています。

「inputRadioVal」という変数をまず用意して「inputRadioVal」に格納されている値とクリックしたときのvalueの値が一緒でなかった場合は変数にvalueの値を格納します。

もし一緒だった場合はチェックをはずして「inputRadioVal」の変数にnullをセットします。

jQuery(function(){
        var inputRadioVal;
        jQuery('input[type="radio"]').on('click',function(){
                if(jQuery(this).val() == inputRadioVal) {
                        jQuery(this).prop('checked', false);
                        inputRadioVal = null;
                } else {
                        inputRadioVal = jQuery(this).val();
                }
        });
});    

これでラジオボタンをクリックすることでチェックをつけたりはずしたりができるようになりました。