programing

라디오 버튼을 끄려면 어떻게 해야 하나요?

goodcopy 2023. 1. 20. 17:31
반응형

라디오 버튼을 끄려면 어떻게 해야 하나요?

jQuery를 사용하여 AJAX 폼을 전송한 후 선택 해제하고 싶은 옵션버튼 그룹이 있습니다.다음과 같은 기능이 있습니다.

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

이 기능을 사용하면 텍스트 상자의 값을 지울 수 있지만 라디오 버튼 값은 지울 수 없습니다.

그나저나 저도 노력했어요.$(this).val("");하지만 소용없었어요

둘 중 하나(syslog js)

this.checked = false;

또는 (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

attr()와 prop()의 차이와 prop()가 현재 권장되는 이유에 대한 설명은 jQuery prop() 도움말 페이지를 참조하십시오.
prop()는 jQuery 1.6에서 2011년 5월에 도입되었습니다.

필요없을거야.each기능.

$("input:radio").attr("checked", false);

또는

$("input:radio").removeAttr("checked");

텍스트 상자에도 동일한 내용이 적용됩니다.

$('#frm input[type="text"]').val("");

하지만 당신은 이것을 개선할 수 있다.

$('#frm input:text').val("");

해라

$(this).removeAttr('checked')

많은 브라우저가 '체크=아무거나'를 사실로 해석하기 때문입니다.그러면 선택한 속성이 모두 제거됩니다.

이게 도움이 됐으면 좋겠다.

이고르의 코드를 기반으로 한 라우리나스의 플러그인을 약간 수정한 것입니다.이것은 타겟이 되는 라디오버튼과 관련된 라벨에 대응하고 있습니다.

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

Igor의 코드를 플러그인으로 다시 씁니다.

용도:

$('input[type=radio]').uncheckableRadio();

플러그인:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

고마워 패트릭, 덕분에 기분이 좋아졌어!머드다운을 사용하셔야 합니다.하지만 내가 코드를 개선했으니까 라디오 버튼 그룹을 다룰 수 있어.

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

무선 및 무선 그룹의 경우:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

이렇게 하면 효과가 있습니다.

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });

해라

$(this).attr("checked" , false );

다음 체크 박스만 사용하여 라디오 버튼 동작을 시뮬레이트할 수도 있습니다.

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

그런 다음 다음과 같은 간단한 코드를 사용하여 작업을 수행할 수 있습니다.

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

정상적으로 동작하며, 각 버튼의 동작을 보다 잘 제어할 수 있습니다.

http://jsfiddle.net/almircampos/n1zvrs0c/ 에서 직접 체험할 수 있습니다.

또한 이 포크는 http://jsfiddle.net/5ry8n4f4/에서 요청하신 모든 항목을 선택 해제할 수 있습니다.

이것을 사용하다

$("input[name='nameOfYourRadioButton']").attr("checked", false);

이 JQuery를 사용하여 옵션버튼을 해제할 수 있습니다.

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

jQuery에 다음 코드를 입력합니다.

jQuery("input:radio").removeAttr("checked");

javascript의 경우:

$("input:radio").removeAttr("checked");

foreach 루프, .each() fubction 등을 배치할 필요가 없습니다.

$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

이것은 거의 양호하지만 [0]을(를) 놓쳤습니다.

정답 ->>$(this)[0].checked = false;

function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

:D

$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

체크된 라디오를 더블클릭할 때마다 체크된 무선은 false로 바뀝니다.

제 라디오는id=radxxxxxxxx아이디 셀렉터를 쓰거든요

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

올바른 셀렉터는 다음과 같습니다.#frm input[type="radio"]:checked것은 아니다.#frm input[type="radio":checked]

언급URL : https://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button

반응형