복붙노트

[JQUERY] jQuery를 체크 박스 변화와 클릭 이벤트

JQUERY

jQuery를 체크 박스 변화와 클릭 이벤트

해결법


  1. 1.JSFiddle에서 테스트 및 체크 박스와 관련된 라벨을 클릭하면 발사의 추가 혜택을 가지고 당신이 for.This 접근 방식을 요구하는지 않습니다.

    JSFiddle에서 테스트 및 체크 박스와 관련된 라벨을 클릭하면 발사의 추가 혜택을 가지고 당신이 for.This 접근 방식을 요구하는지 않습니다.

    업데이트 답변 :

    $(document).ready(function() {
        //set initial state.
        $('#textbox1').val(this.checked);
    
        $('#checkbox1').change(function() {
            if(this.checked) {
                var returnVal = confirm("Are you sure?");
                $(this).prop("checked", returnVal);
            }
            $('#textbox1').val(this.checked);        
        });
    });
    

    원래 답변 :

    $(document).ready(function() {
        //set initial state.
        $('#textbox1').val($(this).is(':checked'));
    
        $('#checkbox1').change(function() {
            if($(this).is(":checked")) {
                var returnVal = confirm("Are you sure?");
                $(this).attr("checked", returnVal);
            }
            $('#textbox1').val($(this).is(':checked'));        
        });
    });
    

  2. 2.사용 mousedown

    사용 mousedown

    $('#checkbox1').mousedown(function() {
        if (!$(this).is(':checked')) {
            this.checked = confirm("Are you sure?");
            $(this).trigger("change");
        }
    });
    

  3. 3.답변의 대부분은 (아마도) 당신이 사용하는 경우 <레이블 = "cbId"> CB 이름 잡을 수 없습니다. 당신이 레이블을 클릭이 방법은 직접 체크 박스를 클릭하는 대신 상자를 확인합니다. (질문하지만, 다양한 검색 결과를 정확 하 여기 와서하는 경향)

    답변의 대부분은 (아마도) 당신이 사용하는 경우 <레이블 = "cbId"> CB 이름 잡을 수 없습니다. 당신이 레이블을 클릭이 방법은 직접 체크 박스를 클릭하는 대신 상자를 확인합니다. (질문하지만, 다양한 검색 결과를 정확 하 여기 와서하는 경향)

    <div id="OuterDivOrBody">
        <input type="checkbox" id="checkbox1" />
        <label for="checkbox1">Checkbox label</label>
        <br />
        <br />
        The confirm result:
        <input type="text" id="textbox1" />
    </div>
    

    이 경우에 당신은 사용할 수 있습니다 :

    jQuery를 이전 버전 :

    $('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
        // From the other examples
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = !sure;
            $('#textbox1').val(sure.toString());
        }
    });
    

    의 jQuery 1.6.4와 JSFiddle 예

    jQuery를 1.7+

    $('#checkbox1').on('change', function() { 
        // From the other examples
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = !sure;
            $('#textbox1').val(sure.toString());
        }
    });
    

    최신의 jQuery 2.X와 JSFiddle 예


  4. 4.음 .. 그냥 두통 (여기에 과거 자정을) 절약을 위해, 내가 가지고 올 수 있습니다 :

    음 .. 그냥 두통 (여기에 과거 자정을) 절약을 위해, 내가 가지고 올 수 있습니다 :

    $('#checkbox1').click(function() {
      if (!$(this).is(':checked')) {
        var ans = confirm("Are you sure?");
         $('#textbox1').val(ans);
      }
    });
    

    희망이 도움이


  5. 5.나를 위해이 잘 작동합니다 :

    나를 위해이 잘 작동합니다 :

    $('#checkboxID').click(function () {
        if ($(this).attr('checked')) {
            alert('is checked');
        } else {
            alert('is not checked');
        }
    })
    

  6. 6.여기 있어요

    여기 있어요

    html로

    <input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">
    

    자바 스크립트

    <script>
        $(document).ready(function () {
    
          $('input[id^="ProductId_"]').click(function () {
    
            if ($(this).prop('checked')) {
               // do what you need here     
               alert("Checked");
            }
            else {
               // do what you need here         
               alert("Unchecked");
            }
          });
    
      });
    </script>
    

  7. 7.변경 이벤트를 제거하고, 대신에 클릭 이벤트에서 텍스트 상자의 값을 변경합니다. 오히려 확인의 결과를 반환하는 대신 var에 그것을 잡을 수있어. 진정한 경우, 값을 변경합니다. 그런 다음 VAR을 반환합니다.

    변경 이벤트를 제거하고, 대신에 클릭 이벤트에서 텍스트 상자의 값을 변경합니다. 오히려 확인의 결과를 반환하는 대신 var에 그것을 잡을 수있어. 진정한 경우, 값을 변경합니다. 그런 다음 VAR을 반환합니다.


  8. 8.클릭과 같은 이벤트 루프의 값을 검사하는 것은 문제가 확인란을 선택합니다.

    클릭과 같은 이벤트 루프의 값을 검사하는 것은 문제가 확인란을 선택합니다.

    이 시도:

    $('#checkbox1').click(function() {
        var self = this;
        setTimeout(function() {
    
            if (!self.checked) {
                var ans = confirm("Are you sure?");
                self.checked = ans;
                $('#textbox1').val(ans.toString());
            }
        }, 0);
    });
    

    데모 : http://jsfiddle.net/mrchief/JsUWv/6/


  9. 9.당신이 iCheck jQuery를 사용하는 경우 코드 아래를 사용

    당신이 iCheck jQuery를 사용하는 경우 코드 아래를 사용

     $("#CheckBoxId").on('ifChanged', function () {
                    alert($(this).val());
                });
    

  10. 10.이 시도

    이 시도

    $('#checkbox1').click(function() {
            if (!this.checked) {
                var sure = confirm("Are you sure?");
                this.checked = sure;
                $('#textbox1').val(sure.toString());
            }
        });
    

  11. 11.

    $(document).ready(function() {
        //set initial state.
        $('#textbox1').val($(this).is(':checked'));
    
        $('#checkbox1').change(function() {
            $('#textbox1').val($(this).is(':checked'));
        });
    
        $('#checkbox1').click(function() {
            if (!$(this).is(':checked')) {
                if(!confirm("Are you sure?"))
                {
                    $("#checkbox1").prop("checked", true);
                    $('#textbox1').val($(this).is(':checked'));
                }
            }
        });
    });
    

  12. 12.늦은 대답,하지만 당신은 또한 ( "변화")에서 사용할 수 있습니다

    늦은 대답,하지만 당신은 또한 ( "변화")에서 사용할 수 있습니다

    $ ( '# 체크'). ( '변화', 기능에 대한 () { var에 확인 = this.checked $ ( '기간'). html로 (checked.toString ()) }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <입력 유형 = "체크 박스"ID = "확인"> 저를 확인하라!


  13. 13.

    // this works on all browsers.
    
    $(document).ready(function() {
        //set initial state.
        $('#textbox1').val($(this).is(':checked'));
    
        $('#checkbox1').change(function(e) {
            this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
            $('#textbox1').val(this.checked);
            return true;
        });
    });
    

  14. 14.

    $('#checkbox1').click(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked')); 
    });
    
    
    <div id="check">
        <input type="checkbox" id="checkbox1" />
        <input type="text" id="textbox1" />
    </div>
    

  15. 15.단순히 이벤트를 클릭하여 사용 내 체크 박스 ID는 CheckAll입니다

    단순히 이벤트를 클릭하여 사용 내 체크 박스 ID는 CheckAll입니다

         $('#CheckAll').click(function () {
    
            if ($('#CheckAll').is(':checked') == true) {
    
                 alert(";)");
          }
        }
    

  16. 16.이름으로 라디오 가치를

    이름으로 라디오 가치를

     $('input').on('className', function(event){
            console.log($(this).attr('name'));
            if($(this).attr('name') == "worker")
                {
                    resetAll();                 
                }
        });
    

  17. 17.확실 왜 모든 사람이 그렇게 복잡하고있다 있지 않다. 이것은 모든 내가 한 것입니다.

    확실 왜 모든 사람이 그렇게 복잡하고있다 있지 않다. 이것은 모든 내가 한 것입니다.

    if(!$(this).is(":checked")){ console.log("on"); }
    

  18. 18.시험

    시험

    checkbox1.onclick = E => { (! checkbox1.checked이)! = 확인을 checkbox1.checked 경우 ( "확실해?"); textbox1.value = checkbox1.checked; }


  19. 19.

     $("#person_IsCurrentAddressSame").change(function ()
        {
            debugger
            if ($("#person_IsCurrentAddressSame").checked) {
                debugger
    
            }
            else {
    
            }
    
        })
    
  20. from https://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event by cc-by-sa and MIT license