[JQUERY] 자바 스크립트 (jQuery를 또는 바닐라)와 / 선택을 취소 확인란을 선택?

자바 스크립트 (jQuery를 또는 바닐라)와 / 선택을 취소 확인란을 선택?

해결법

1. ---

   1.자바 스크립트 :

   자바 스크립트 :

   // Check
   document.getElementById("checkbox").checked = true;
   
   // Uncheck
   document.getElementById("checkbox").checked = false;
   

   jQuery를 (1.6) :

   // Check
   $("#checkbox").prop("checked", true);
   
   // Uncheck
   $("#checkbox").prop("checked", false);
   

   jQuery를 (1.5) :

   // Check
   $("#checkbox").attr("checked", true);
   
   // Uncheck
   $("#checkbox").attr("checked", false);
   

2. ---

   2.아직 언급되지 않은 중요 행동 :

   아직 언급되지 않은 중요 행동 :

   프로그래밍 방식으로 확인 속성을 설정, 체크 박스의 변경 이벤트가 발생하지 않습니다.

   이 바이올린에 자신에 대한 참조 : http://jsfiddle.net/fjaeger/L9z9t04p/4/

   (바이올린 크롬 46, 41, 파이어 폭스 IE 11 시험)

   행사에 의존 당신이 코드를 작성하는 자신을 발견 할 수있는 몇 가지 일, 해고. 다음과 같이 체크 박스 요소의 클릭 () 메서드를 호출해야합니다 이벤트가 발생을합니다 :

   document.getElementById('checkbox').click();
   

   그러나이 토글 대신 특별히 true 또는 false로 설정하는 체크 박스의 상태를 확인. 기억하십시오 변경 이벤트해야에만 화재, checked 속성이 실제로 변경됩니다.

   또한 jQuery를 방법에 적용 소품이나 ATTR를 사용하여 속성을 설정, 변경 이벤트가 발생하지 않습니다.

   당신은 클릭 () 메서드를 호출하기 전에, checked 속성을 테스트 할 수 있습니다. 예:

   function toggle(checked) {
     var elm = document.getElementById('checkbox');
     if (checked != elm.checked) {
       elm.click();
     }
   }
   

   여기 클릭 방법에 대해 자세히 알아보기 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

3. ---

   3.확인하다:

   확인하다:

   document.getElementById("id-of-checkbox").checked = true;
   

   선택 취소합니다 :

   document.getElementById("id-of-checkbox").checked = false;
   

4. ---

   4.우리는 미립자 체크 박스를 같이 확인 할 수 있습니다

   우리는 미립자 체크 박스를 같이 확인 할 수 있습니다

   $('id of the checkbox')[0].checked = true
   

   선택을 취소 의해

   $('id of the checkbox')[0].checked = false
   

5. ---

   5.나는 설정 체크 박스에 비어 있지 않은 문자열 리드에 속성을 '확인'고, 메모 싶습니다.

   나는 설정 체크 박스에 비어 있지 않은 문자열 리드에 속성을 '확인'고, 메모 싶습니다.

   당신이 "거짓"으로 '확인'속성을 설정한다면, 체크 박스가 체크됩니다. 나는 확인 확인란이 선택되지 않은 만들기 위해 빈 문자열, null 또는 부울 값 false로 값을 설정했다.

6. ---

   6.이 시도:

   이 시도:

   //Check
   document.getElementById('checkbox').setAttribute('checked', 'checked');
   
   //UnCheck
   document.getElementById('chk').removeAttribute('checked');
   

7. ---

   7.

   function setCheckboxValue(checkbox,value) {
       if (checkbox.checked!=value)
           checkbox.click();
   }
   

8. ---

   8.

   <script type="text/javascript">
       $(document).ready(function () {
           $('.selecctall').click(function (event) {
               if (this.checked) {
                   $('.checkbox1').each(function () {
                       this.checked = true;
                   });
               } else {
                   $('.checkbox1').each(function () {
                       this.checked = false;
                   });
               }
           });
   
       });
   
   </script>
   

9. ---

   9.어떤 이유로, 당신이 원하지 않는 (또는 수 없습니다) 체크 박스 요소에 .click ()를 실행하면, 당신은 단순히 .checked를 속성 (<입력 유형의 IDL의 속성을 통해 직접 값을 변경할 수 있습니다 = "체크 박스">).

   어떤 이유로, 당신이 원하지 않는 (또는 수 없습니다) 체크 박스 요소에 .click ()를 실행하면, 당신은 단순히 .checked를 속성 (<입력 유형의 IDL의 속성을 통해 직접 값을 변경할 수 있습니다 = "체크 박스">).

   주 당신이 완벽한 솔루션을 가지고 수동으로 발사해야하므로 이렇게하면 일반적으로 관련 이벤트 (변경)를 발생하지 않는 그 어떤 관련 이벤트 핸들러와 함께 작동합니다.

   다음은 원시 자바 스크립트 (ES6)의 기능 예는 다음과 같습니다

   클래스 ButtonCheck { 생성자 () { ourCheckBox = 널하자; this.ourCheckBox document.querySelector = ( '# checkboxID'); checkBoxButton = 널하자; this.checkBoxButton document.querySelector = ( '# checkboxID + 버튼 [아리아 라벨 = "checkboxID"] "); checkEvent = 새로운 이벤트 ( '변화')하자; this.checkBoxButton.addEventListener ( '클릭'기능 () { 체크 박스 = this.ourCheckBox하자; // 체크 박스를 전환 : 상태 반전! ! checkBox.checked = checkBox.checked; //하자 다른 것들 변경 확인란을 알고 checkBox.dispatchEvent (checkEvent); } .bind (이), TRUE); this.eventHandler = 함수 (E) { document.querySelector ( '. checkboxfeedback') insertAdjacentHTML와 ( 'beforeend을', '
   이벤트 확인란에 발생 입력하십시오!'+ e.type + '체크 박스 상태 지금'+ this.ourCheckBox.checked).; } // 데모 : 우리는 관계없이 확인란을 클릭하거나 버튼 여부 변경 이벤트를 볼 수 있습니다 this.ourCheckBox.addEventListener ( '변화', 기능 (E) { this.eventHandler (E); } .bind (이), TRUE); // 데모 : 우리 바인드에만 체크 박스에 클릭 핸들러는, 우리는 체크 박스의 클릭을 참조하는 경우 this.ourCheckBox.addEventListener ({), 기능 (예 '를 클릭' this.eventHandler (E); } .bind (이), TRUE); } } VAR 초기화 = 함수 () { CONST checkIt 새로운 ButtonCheck을 () =; } 경우 (document.readyState! = '로딩') { 초기화; } 다른 { document.addEventListener ( 'DOMContentLoaded'INIT); } <버튼 아리아 라벨 = "checkboxID"> 변경 확인란! <= "checkboxfeedback"DIV 클래스> 아니요 아직 변경!

   당신이 이것을 실행하고 체크 박스와 버튼을 모두 클릭하면 당신은 어떻게이 작품의 감각을 얻어야한다.

   참고 주어진 ID가 생성자에 전달, 또는이 모든 버튼에 적용 할 수있는 나는 간결 / 단순화를 위해 document.querySelector을 사용하지만이 쉽게 하나에 밖으로 구축 할 수있는 체크 박스를위한 아리아 - 레이블과 같은 행동 (참고 그 I 버튼에 ID를 설정하고 확인란이 방식)하거나 확장하는 다른 방법의 수를 사용하는 경우 수행해야 아리아 - labelledby을주는 귀찮게하지 않았다. 마지막 두 addEventListeners 어떻게 작동하는지 데모에 불과하다.

10. ---

    10.하나의 체크 시도에 대한

    하나의 체크 시도에 대한

    myCheckBox.checked = 1 <입력 유형 = "체크 박스"ID = "myCheckBox"> 통화 그녀에게

    멀티 시도에 대한

    document.querySelectorAll ( '. imChecked'). 대해 forEach (c => c.checked = 1) 구매 와인 :로
    <입력 유형 = "체크 박스"클래스 = "imChecked"> 부드러운 재즈 음악을 재생 : <입력 유형 = "체크 박스">로
    애프터 셰 이브 :로
    <입력 유형 = "체크 박스"클래스 = "imChecked">

11. ---

    11.나는 미래에이 코드 도움말 사람 희망, 나는 현재의 대답에 동의하지만, 내 경우에는 작동하지 않습니다 :

    나는 미래에이 코드 도움말 사람 희망, 나는 현재의 대답에 동의하지만, 내 경우에는 작동하지 않습니다 :

    // check
    $('#checkbox_id').click()
    

12. ---

    12.바닐라 (PHP)를 켜거나 저장 결과 상자를 확인합니다.

    바닐라 (PHP)를 켜거나 저장 결과 상자를 확인합니다.

    <?php
        if($serverVariable=="checked") 
            $checked = "checked";
        else
            $checked = "";
    ?>
    <input type="checkbox"  name="deadline" value="yes" <?= $checked 
    ?> >
    
    # on server
    <?php
            if(isset($_POST['deadline']) and
                 $_POST['deadline']=='yes')
                 $serverVariable = checked;    
            else
                 $serverVariable = "";  
    ?>
    

from https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript-jquery-or-vanilla by cc-by-sa and MIT license