[javascript] jQuery를 사용하여 체크 박스에 대해“확인”설정

JAVASCRIPT / 글쓴이

jQuery를checkbox 사용하여 틱하기 위해 이와 같은 작업을 수행하고 싶습니다 .

$(".myCheckBox").checked(true);

또는

$(".myCheckBox").selected(true);

그런 것이 있습니까?

답변

최신 jQuery

사용 .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

하나의 요소로 작업하는 경우 항상 기본에 액세스 HTMLInputElement하고 .checked속성을 수정할 수 있습니다.

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

이 대신 .prop()및 .attr()메소드 를 사용하면 일치하는 모든 요소에서 작동한다는 이점 이 있습니다.

jQuery 1.5.x 이하

이 .prop()방법을 사용할 수 없으므로를 사용해야 .attr()합니다.

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

이 방법 은 버전 1.6 이전의 jQuery 단위 테스트에서 사용 된 접근 방식 이며 $('.myCheckbox').removeAttr('checked');, 후자가 상자를 처음 확인한 경우 호출 동작 .reset()을 포함하는 모든 형식 에서 호출 동작을 변경하기 때문에 사용하는 것이 좋습니다. 반갑지 않은 행동 변화.

더 많은 맥락을 위해, checked1.5.x에서 1.6으로의 전환에서 속성 / 프로퍼티 처리에 대한 변경 사항에 대한 불완전한 논의 는 버전 1.6 릴리스 정보 및 문서 의 속성 대 특성 섹션 에서 찾을 수 있습니다 ..prop()

답변

사용하다:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

확인란이 선택되어 있는지 확인하려면 다음을 수행하십시오.

$('.myCheckbox').is(':checked');

답변

이것은 jQuery를 사용하여 확인란을 선택하고 선택 취소하는 올바른 방법입니다. 플랫폼 간 표준이므로 양식을 다시 게시 할 수 있습니다.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

이렇게하면 확인란을 선택 및 선택 해제하기 위해 JavaScript 표준을 사용하므로 확인란 요소의 “checked”속성을 올바르게 구현하는 모든 브라우저는이 코드를 완벽하게 실행합니다. 이것은 모든 주요 브라우저 여야 하지만 Internet Explorer 9 이전에는 테스트 할 수 없습니다.

문제 (jQuery 1.6) :

사용자가 확인란을 클릭하면 해당 확인란이 “선택된”속성 변경에 응답하지 않습니다.

다음은 누군가가 확인란 을 클릭 한 후 작업을 수행하지 못하는 확인란 속성의 예입니다 (Chrome에서 발생).

깡깡이

해결책:

DOM 요소 에 JavaScript의 “checked”속성을 사용하면 DOM 을 조작하여 원하는 작업을 수행하는 대신 문제를 직접 해결할 수 있습니다.

깡깡이

이 플러그인은 jQuery가 선택한 요소의 checked 속성을 변경하고 모든 상황에서 확인란을 성공적으로 선택 및 선택 취소합니다. 따라서 이것이 과장된 솔루션처럼 보일 수 있지만 사이트의 사용자 환경을 개선하고 사용자 불만을 예방하는 데 도움이됩니다.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

또는 플러그인을 사용하지 않으려는 경우 다음 코드 스 니펫을 사용할 수 있습니다.

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

답변

넌 할 수있어

$('.myCheckbox').attr('checked',true) //Standards compliant

또는

$("form #mycheckbox").attr('checked', true)

실행하려는 확인란의 onclick 이벤트에 사용자 지정 코드가있는 경우 대신이 코드를 사용하십시오.

$("#mycheckbox").click();

속성을 완전히 제거하여 선택을 취소 할 수 있습니다.

$('.myCheckbox').removeAttr('checked')

다음과 같은 모든 확인란을 선택할 수 있습니다.

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

답변

새로운 방법으로 $ .fn 객체를 확장 할 수도 있습니다.

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

그럼 당신은 할 수 있습니다 :

$(":checkbox").check();
$(":checkbox").uncheck();

또는 해당 이름을 사용하는 다른 라이브러리를 사용하는 경우 mycheck () 및 myuncheck ()와 같이 고유 한 이름을 지정할 수 있습니다.

답변

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

마지막 하나는 체크 박스의 클릭 이벤트를 발생시키고 다른 하나는 그렇지 않습니다. 따라서 onclick 이벤트에 실행하려는 확인란의 사용자 지정 코드가있는 경우 마지막 코드를 사용하십시오.

답변

확인란을 선택하려면 사용해야합니다

 $('.myCheckbox').attr('checked',true);

또는

 $('.myCheckbox').attr('checked','checked');

확인란의 선택을 취소하려면 항상 false로 설정해야합니다.

 $('.myCheckbox').attr('checked',false);

당신이 할 경우

  $('.myCheckbox').removeAttr('checked')

속성을 모두 제거하므로 양식을 재설정 할 수 없습니다.

나쁜 데모 jQuery 1.6 . 나는 이것이 깨 졌다고 생각한다. 1.6을 위해 나는 그것에 대해 새로운 게시물을 만들 것입니다.

새로운 작업 데모 jQuery 1.5.2 는 Chrome에서 작동합니다.

두 데모 모두

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});