[Javascript] 선택한 라디오 버튼을 선택 취소하는 방법


Answers

이 간단한 스크립트를 사용하면 이미 선택된 라디오 버튼을 선택 취소 할 수 있습니다. 모든 자바 스크립트 사용 브라우저에서 작동합니다.

<html>
    <!-- html from your link: [http://jsfiddle.net/wuAWn/][1]  -->
    <body>
        <input type='radio' class='radio-button' name='re'>
        <input type='radio' class='radio-button' name='re'>
        <input type='radio' class='radio-button' name='re'>
    </body>

    <script type="text/javascript">
        var allRadios = document.getElementsByName('re');
        var booRadio;
        var x = 0;
        for(x = 0; x < allRadios.length; x++){

            allRadios[x].onclick = function() {
                if(booRadio == this){
                    this.checked = false;
                    booRadio = null;
                }else{
                    booRadio = this;
                }
            };
        }
    </script>
</html>

http://jsfiddle.net/6Mkde/

Question

이 질문에는 이미 답변이 있습니다.

이 솔루션은 파이어 폭스에서만 작동합니다.

$(':radio').on("change", function(event){
    $(this).prop('checked', true);
});

$(':radio').on("click", function(event){
    $(this).prop('checked', false);
});

크롬에서는 아무 것도 선택하지 않아도됩니다. http://jsfiddle.net/wuAWn/

Ofc, 나는 변수를 사용하고 다음과 같이 쓸 수있다.

var val = -1;
$(':radio').on("click", function(){
    if($(this).val()==val) 
    {$(this).prop('checked', false);
    val = -1;
    }
    else val = $(this).val();
});

하지만 내 페이지에 몇 가지 라디오 버튼 그룹을 가지고 html 콘텐츠를 아약스를 통해로드됩니다, 그래서 모든 라디오 버튼 그룹에 대한 변수를 정의하고 모든 라디오 버튼에 대해 동일한 기능을 작성하는 대신 그들 모두를위한 1 기능을 wrtite하고 싶습니다 그룹.

편집 : 확인란을 귀하의 도움을 주셔서 감사하지만 라디오 버튼 그룹으로 작동하는 확인란에 대한 동일한 이름 onclick 모든 다른 확인란의 선택을 취소합니다 adittional javascrip 작성해야합니다, 나는 이미 라디오 단추 CSS 및 해당 날 쉽게 look-like-checkbox와 같은 클래스를 추가하고 체크 박스처럼 보이게하고, 커스텀 모양의 유니폼 라이브러리를 사용합니다. 어쨌든 여기는 이상한 솔루션입니다. http://jsfiddle.net/wuAWn/9/




이 시도

http://jsfiddle.net/wuAWn/6/

    $('.radio-button').on("click", function (event) {
        var this_input = $(this);
        if (this_input.attr('checked1') == '11') {

            this_input.attr('checked1', '11')

        }
        else {
            this_input.attr('checked1', '22')
                        }
        $('.radio-button').prop('checked', false);
        if (this_input.attr('checked1') == '11') {
            this_input.prop('checked', false);
            this_input.attr('checked1', '22')
        }
        else {
            this_input.prop('checked', true);
            this_input.attr('checked1', '11')
        }

    });



'없음'이라고 표시된 각 그룹에 추가 라디오 버튼을 추가하는 것을 고려해 볼 수 있습니다. 이는 개발 프로세스를 복잡하게하지 않으면 서 일관된 사용자 경험을 창출 할 수 있습니다.




라디오 버튼은 필수 옵션입니다 ... 체크하지 않으려면 체크 박스를 사용하면 일을 복잡하게하거나 사용자가 라디오 버튼을 선택 취소 할 필요가 없습니다. JQuery를 제거하면 그 중 하나에서 선택할 수있다.




이 시도

모든 라디오의 단일 기능에는 " 라디오 버튼" 클래스가 있습니다.

크롬 및 FF 작업

http://jsfiddle.net/wuAWn/5/

$('.radio-button').on("click", function(event){
    $('.radio-button').prop('checked', false);
     $(this).prop('checked', true);
});