javascript 유지 jQuery로 체크 박스를 "체크"로 설정 했습니까?




체크 박스 체크 유지 (24)

jQuery를 사용하여 checkboxcheckbox 다음과 같이하고 싶습니다.

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

또는

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

그런 것이 있습니까?


api.jquery.com/prop 에서 알 수 있듯이 Internet Explorer 9 이전의 Internet Explorer에서 메모리 누수가 발생했는지 확인하십시오.

버전 9 이전의 Internet Explorer에서 .prop ()를 사용하여 DOM 요소 속성을 간단한 기본 값 (number, string 또는 boolean) 이외의 값으로 설정하면 속성이 제거되지 않으면 메모리 누수가 발생할 수 있습니다 (.removeProp )) DOM 요소가 문서에서 제거되기 전에. 메모리 누수없이 DOM 객체의 값을 안전하게 설정하려면 .data ()를 사용하십시오.


다음과 같은 체크 박스를 선택했을 때;

$('.className').attr('checked', 'checked')

그것은 충분하지 않을 수도 있습니다. 아래 함수를 호출해야합니다.

$('.className').prop('checked', 'true')

특히 확인란의 선택 속성을 제거했을 때


지정된 하위 문자열 "ckbItem"을 포함하는 값으로 지정된 속성을 갖는 요소를 선택합니다.

$('input[name *= ckbItem]').prop('checked', true);

이름 속성에 ckbItem을 포함하는 모든 요소를 ​​선택합니다.


체크 된 코드와 체크되지 않은 코드는 다음과 같습니다.

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

업데이트 : 다음은 attr을 대체하는 새로운 Jquery 1.6+ prop 메소드를 사용하는 동일한 코드 블록입니다.

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

나는 그것을 사용하여 일할 수 없었다 :

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

true와 false는 모두 체크 박스를 체크합니다. 나를 위해 일한 것은 :

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

속성을 확인하기 위해 jQuery와 함께 elementObject 를 사용할 수 있습니다.

$(objectElement).attr('checked');

오류없이 모든 jQuery 버전에 사용할 수 있습니다.

업데이트 : Jquery 1.6+에는 attr을 대체하는 새로운 prop 메서드가 있습니다 (예 :

$(objectElement).prop('checked');

확인하고 선택을 취소하려면

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

가정 문제는 ...

VALUE 로 설정 한 체크 박스를 어떻게 체크 하나요?

일반적인 체크 박스 세트에서 모든 입력 태그는 동일한 이름을 가지며 속성 value 따라 다르다는 것을 기억하십시오. 세트의 각 입력에 ID가 없습니다.

시안의 대답은 다음 코드를 사용하여 더 구체적인 선택기 로 확장 할 수 있습니다.

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

jQuery 1.6 이상

새로운 .prop() 메소드를 사용하십시오.

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

jQuery 1.5.x 이하

.prop() 메소드를 사용할 수 없으므로 .attr() 을 사용해야합니다.

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

방법버전 1.6 이전의 jQuery의 단위 테스트에서 사용 된 접근 방식 이며 사용하는 것이 더 바람직합니다.

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

후자는 상자가 처음 검사 된 경우이를 포함하는 모든 양식에서 .reset() 호출의 동작을 변경합니다. 이는 미묘하지만 아마도 원치 않는 동작 변경입니다.

더 많은 내용을 보려면 1.5.x에서 1.6으로 전환 할 때 checked 속성 / 속성 처리에 대한 변경 사항에 대한 불완전한 논의가 버전 1.6 릴리스 노트.prop() 속성 및 속성 섹션에서 발견 할 수 있습니다. 문서화 .

모든 버전의 jQuery

하나의 요소 만 사용하는 경우 HTMLInputElement.checked 속성을 수정할 수 있습니다.

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

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


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

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


$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

여기에 jQuery없이 할 수있는 방법이있다.

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


용도:

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

체크 박스가 선택되었는지 확인하려면 다음을 수행하십시오.

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

나는 해결책을 놓치고있다. 나는 항상 사용할 것이다 :

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

PhoneGap 을 사용하여 응용 프로그램 개발을하고 있고 즉시 표시 할 단추에 가치가 있다면이 작업을 수행해야합니다.

$('span.ui-[controlname]',$('[id]')).text("the value");

나는 스팬없이 인터페이스가 당신이 무엇을 하던지 업데이트하지 않는다는 것을 알았습니다.


@ livefree75가 말한대로 :

jQuery 1.5.x 이하

새로운 메소드를 사용하여 $ .fn 객체를 확장 할 수도 있습니다.

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

하지만 jQuery의 새 버전에서는 다음과 같은 것을 사용해야합니다.

jQuery 1.6 이상

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

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

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

jQuery 1.6 이상을 사용하여 체크 박스를 체크하려면 다음과 같이하십시오.

checkbox.prop('checked', true);

선택을 취소하려면 다음을 사용하십시오.

checkbox.prop('checked', false);

다음은 jQuery를 사용하여 체크 박스를 토글하는 데 사용하는 것입니다.

checkbox.prop('checked', !checkbox.prop('checked'));

1.5 이하의 jQuery를 사용하는 경우 :

checkbox.attr('checked', true);

선택을 취소하려면 다음을 사용하십시오.

checkbox.attr('checked', false);

또 다른 가능한 해결책은 다음과 같습니다.

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

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

 $('.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');
    }
});

jQuery에서,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

또는

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

JavaScript에서는,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

넌 할 수있어

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

또는

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

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

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

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

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

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

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

모바일을 사용하고 인터페이스를 업데이트하고 확인란을 선택하지 않은 상태로 표시하려면 다음을 사용하십시오.

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

여러 확인란을 선택하는 방법에 대한 코드 및 데모는 다음과 같습니다.

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

이것은 크로스 플랫폼 표준이기 때문에 jQuery로 체크 박스를 체크하고 체크하지 않는 올바른 방법이며 폼 재 게시 허용합니다.

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

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

이렇게하면 checkbox 요소의 "checked"속성을 완벽하게 구현하는 모든 브라우저가이 코드를 완벽하게 실행하므로 확인란을 선택하거나 선택 취소하는 데 JavaScript 표준을 사용하고 있습니다. 이것은 모든 주요 브라우저 여야 하지만 Internet Explorer 9 이전에는 테스트 할 수 없습니다.

문제 (jQuery 1.6) :

사용자가 체크 박스를 클릭하면 해당 체크 박스는 "checked"속성 변경에 대한 응답을 중지합니다.

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

Fiddle

해결책:

DOM 요소에서 JavaScript의 "checked"속성을 사용하여 우리가 원하는 것을 수행하도록 DOM을 조작하는 대신 직접 문제를 해결할 수 있습니다.

Fiddle

이 플러그인은 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;
});






checked