복붙노트

[JQUERY] 설정 jQuery로 체크 박스에 대해 "확인"

JQUERY

설정 jQuery로 체크 박스에 대해 "확인"

해결법


  1. 1.) (.prop 사용

    ) (.prop 사용

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

    당신은 단지 하나 개의 요소로 작업하는 경우, 당신은 항상 그냥 HTMLInputElement의 기초와 .checked를 속성을 수정에 액세스 할 수 있습니다 :

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

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

    당신이) (.attr 사용해야하므로 .prop () 메소드는 사용할 수 없습니다.

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

    이 jQuery의 유닛에 의해 사용되는 방식이 있음을 유의 버전 1.6 이전 테스트하고 ( 'myCheckbox.') $를 사용하는 것이 바람직하다 removeAttr는 ( '선택').; 미묘한 그러나 아마 환영받지 못하는 행동 변화 - 후자 때문에, 상자가 처음 확인 된 경우,이를 포함하는 모든 형태의 .reset ()를 호출의 동작을 변경합니다.

    더 컨텍스트를 들어, 1.6 1.5.x 이하의 전환에서 확인 된 속성 / 프로퍼티의 취급에 대한 변경 사항의 일부 불완전 논의) (버전 1.6 릴리즈 노트와 .prop의 속성 섹션 대 속성에서 찾을 수 있습니다 선적 서류 비치.


  2. 2.사용하다:

    사용하다:

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

    그리고 당신이 확인란이 선택 여부되어 있는지 확인하려면 :

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

  3. 3.이 크로스 플랫폼 표준 및 양식 재 게시를 허용 이것은, 확인 및 jQuery를 함께 체크 박스를 선택 해제의 올바른 방법입니다.

    이 크로스 플랫폼 표준 및 양식 재 게시를 허용 이것은, 확인 및 jQuery를 함께 체크 박스를 선택 해제의 올바른 방법입니다.

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

    이렇게하면 제대로 구현은 "확인"고 브라우저 있도록 체크 박스 요소의 속성을 완벽하게이 코드를 실행, 자바 스크립트 확인하기위한 기준과 선택 취소 체크 박스를 사용하고 있습니다. 이것은 모든 주요 브라우저해야하지만, 나는 인터넷 익스플로러 9 이전 테스트 드릴 수 없습니다.

    문제점 (jQuery를 1.6) :

    체크 박스에 사용자가 클릭하면 해당 체크 박스 속성 변경 "확인"를에 응답하지 않습니다.

    여기에 누군가가 체크 박스를 클릭 한 후 일을 실패 체크 박스 속성의 예 (이것은 크롬에서 일어나는)입니다.

    깡깡이

    해결책:

    DOM 요소에 자바 스크립트의 "확인"속성을 사용하여, 우리는 대신 우리가하고 싶은 일을에 DOM을 조작하는 시도로, 직접 문제를 해결할 수 있습니다.

    깡깡이

    이 플러그인은 jQuery를에 의해 선택된 모든 요소의 확인 속성을 변경하고, 성공적으로 모든 상황에서 확인하고 선택 해제 확인란 것입니다. 그래서,이 과잉 베어링 솔루션처럼 보일 수도 있지만, 더 나은 사이트의 사용자 경험을 만들 것, 그리고 도움은 사용자의 불만을 방지 할 수 있습니다.

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

  4. 4.넌 할 수있어

    넌 할 수있어

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

    또는

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

    당신은 당신이, 불에 원하는 대신 하나를 사용하는 체크 박스의 온 클릭 이벤트에서 사용자 정의 코드가있는 경우 :

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

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

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

    이 같은 모든 체크 박스를 확인하실 수 있습니다 :

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

  5. 5.또한 새로운 방법과 $ .fn 객체를 확장 할 수 있습니다 :

    또한 새로운 방법과 $ .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 ()와 같은 더 고유 한 이름을 부여 할 수 있습니다.


  6. 6.

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

    마지막 하나는 다른 사람들이하지 않습니다, 체크 박스의 클릭 이벤트가 발생합니다. 당신이 불에 원하는 체크 박스의 온 클릭 이벤트에서 사용자 지정 코드가있는 경우, 마지막 하나를 사용 그래서.


  7. 7.체크 박스를 확인하려면 사용해야합니다

    체크 박스를 확인하려면 사용해야합니다

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

    또는

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

    당신은 항상 false로 설정해야 확인란의 선택을 취소합니다 :

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

    당신이 할 경우

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

    이 속성 모두 함께 제거하기 때문에 폼을 재설정 할 수 없습니다.

    BAD DEMO jQuery를 1.6. 나는이 깨진 생각합니다. 1.6의 경우 그에 새 게시물을 만들려고하고 있습니다.

    새로운 작업 DEMO jQuery를 크롬에서 1.5.2 작동합니다.

    두 데모 사용

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

  8. 8.지정된 서브 스트링 "ckbItem"를 포함하는 값으로, 지정된 특성이 선택이 요소 :

    지정된 서브 스트링 "ckbItem"를 포함하는 값으로, 지정된 특성이 선택이 요소 :

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

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


  9. 9.질문이라고 가정 ...

    질문이라고 가정 ...

    그들은 속성 값 차이, 전형적인 체크 박스 세트에서, 모든 입력 태그의 이름이 같은 기억 : 세트의 각 입력에 대한 ID가 없습니다.

    시안 (西安)의 대답은 다음 코드 줄을 사용하여,보다 구체적인 선택 확장 할 수 있습니다 :

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

  10. 10.나는 해결책을 누락. 난 항상 사용합니다 :

    나는 해결책을 누락. 난 항상 사용합니다 :

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

  11. 11.jQuery를 1.6 사용 확인란을 선택하거나 더 높은 단지 이렇게하려면 다음을 수행합니다

    jQuery를 1.6 사용 확인란을 선택하거나 더 높은 단지 이렇게하려면 다음을 수행합니다

    checkbox.prop('checked', true);
    

    의 선택을 취소, 사용하려면 :

    checkbox.prop('checked', false);
    

    여기에 내가 jQuery를 사용하여 체크 박스를 전환하는 데 사용할 좋아하는 것이있다 :

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

    당신이 jQuery를 1.5 이하를 사용하는 경우 :

    checkbox.attr('checked', true);
    

    의 선택을 취소, 사용하려면 :

    checkbox.attr('checked', false);
    

  12. 12.여기에 jQuery를하지 않고 할 수있는 방법이다

    여기에 jQuery를하지 않고 할 수있는 방법이다

    기능 addOrAttachListener (엘, 유형, 청취자, useCapture를) { 경우 (el.addEventListener) { el.addEventListener (유형, 청취자에 useCapture); } 다른 경우 (el.attachEvent) { (+ 형, 리스너 "ON") el.attachEvent; } }; addOrAttachListener (창, "부하"함수 () { VAR cbElem = document.getElementById를 ( "CB"); VAR rcbElem = document.getElementById를 ( "RCB"); addOrAttachListener (cbElem는, {() 함수를 "클릭" rcbElem.checked = cbElem.checked; } 거짓); } 거짓); <레이블> 나를 클릭! <입력 ID = "CB"TYPE = "체크 박스"/> <레이블> 반사 : <입력 ID = "RCB"TYPE = "체크 박스"/>


  13. 13.다음은 버튼으로 확인하고 선택 해제에 대한 코드는 다음과 같습니다

    다음은 버튼으로 확인하고 선택 해제에 대한 코드는 다음과 같습니다

    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 소품 방법을 사용하여 동일한 코드 블록은 다음과 같습니다

    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;
        });
    });
    

  14. 14.이 시도:

    이 시도:

    $('#checkboxid').get(0).checked = true;  //For checking
    
    $('#checkboxid').get(0).checked = false; //For unchecking
    

  15. 15.우리는 확인 속성을 얻기 위해 jQuery를 함께 elementObject을 사용할 수 있습니다 :

    우리는 확인 속성을 얻기 위해 jQuery를 함께 elementObject을 사용할 수 있습니다 :

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

    우리는 어떤 오류가없이 모든 jQuery를 버전이 사용할 수 있습니다.

    업데이트 : JQuery와는 1.6 예컨대, ATTR를 대체하는 새로운 소품 방법이 있습니다 :

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

  16. 16.당신은 응용 프로그램 개발을하고 폰갭을 사용하고 당신이 즉시 표시 할 것을 버튼에 값이있는 경우,이 일을 기억

    당신은 응용 프로그램 개발을하고 폰갭을 사용하고 당신이 즉시 표시 할 것을 버튼에 값이있는 경우,이 일을 기억

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

    나는 스팬하지 않고, 인터페이스에 상관없이 당신이 무엇을 업데이트하지 않습니다 것을 발견했다.


  17. 17.여기에 여러 개의 체크 박스를 확인하는 방법에 대한 코드와 데모는 ...

    여기에 여러 개의 체크 박스를 확인하는 방법에 대한 코드와 데모는 ...

    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;
            }
        }
    });
    

  18. 18.또 다른 가능한 솔루션 :

    또 다른 가능한 솔루션 :

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

  19. 19.@의 livefree75는 말처럼

    @의 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();
    

  20. 20.모바일 사용하고 업데이트 할 수있는 인터페이스를 원하고 선택되지 않은 상태로 체크 박스를 표시하는 경우, 다음을 사용 :

    모바일 사용하고 업데이트 할 수있는 인터페이스를 원하고 선택되지 않은 상태로 체크 박스를 표시하는 경우, 다음을 사용 :

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

  21. 21.JQuery와 문서 상태로, 이전에 인터넷 익스플로러 9 Internet Explorer에서 메모리 누수의주의 :

    JQuery와 문서 상태로, 이전에 인터넷 익스플로러 9 Internet Explorer에서 메모리 누수의주의 :


  22. 22.jQuery를 들어 1.6

    jQuery를 들어 1.6

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

    jQuery를 들어 1.5.x 이하 이하

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

    확인하다,

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

  23. 23.확인 및 선택 해제

    확인 및 선택 해제

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

  24. 24.

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

  25. 25.이것은 아마도 가장 짧은 쉬운 솔루션입니다 :

    이것은 아마도 가장 짧은 쉬운 솔루션입니다 :

    $(".myCheckBox")[0].checked = true;
    

    또는

    $(".myCheckBox")[0].checked = false;
    

    비록 짧은은 다음과 같습니다

    $(".myCheckBox")[0].checked = !0;
    $(".myCheckBox")[0].checked = !1;
    

    여기뿐만 아니라 jsFiddle이다.


  26. 26.일반 자바 스크립트는 매우 간단하고 훨씬 적은 오버 헤드 :

    일반 자바 스크립트는 매우 간단하고 훨씬 적은 오버 헤드 :

    var elements = document.getElementsByClassName('myCheckBox');
    for(var i = 0; i < elements.length; i++)
    {
        elements[i].checked = true;
    }
    

    여기에 예


  27. 27.나는 그것을 사용하여 작업을 가져올 수 없습니다 :

    나는 그것을 사용하여 작업을 가져올 수 없습니다 :

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

    모두 true와 false 확인란을 선택합니다. 무엇 나를 위해 일한 것은이었다 :

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

  28. 28.때이 같은 체크 박스를 선택;

    때이 같은 체크 박스를 선택;

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

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

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

    당신이 제거 할 때 특히 체크 박스 속성을 확인.


  29. 29.여기에 완전한 답변입니다 jQuery를 사용하여

    여기에 완전한 답변입니다 jQuery를 사용하여

    나는 그것을 테스트하고 100 % 작동합니다 : D를

        // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
        $("#select_unit_button").on("click", function(e){
    
                 var arr = [];
    
                 $(':checkbox:checked').each(function(i){
                     arr[i] = $(this).val(); // u can get id or anything else
                 });
    
                  //console.log(arr); // u can test it using this in google chrome
        });
    

  30. 30.jQuery를에,

    jQuery를에,

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

    또는

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

    자바 스크립트에서,

    if (document.getElementById("checkboxID").checked){
        alert("Checked");
    }
    
  31. from https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery by cc-by-sa and MIT license