jQuery로 토글을 클릭하십시오.

jQuery로 토글을 클릭하십시오.

---

나는 마우스 오버와 y 및 마우스 아웃에서 x를 수행하는 호버 기능을 사용했습니다. 클릭에 대해 똑같이 시도하고 있지만 작동하지 않는 것 같습니다.

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

를 클릭 할 때 확인란을 선택하고 div다시 클릭하면 선택을 취소합니다 (클릭 토글).

---

클릭 할 때마다 확인란의 현재 '선택된'상태를 뒤집어 쉽게 수행 할 수 있습니다. 예 :

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

또는:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

또는 DOM 'checked'속성을 직접 조작하여 (즉 , 클릭 된 확인란의 현재 상태 attr()를 가져 오는 데 사용하지 않음 ) :

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...등등.

참고 : jQuery 1.6부터 propnot을 사용하여 확인란을 설정해야합니다 attr.

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

---

또 다른 접근 방식은 다음과 같이 jquery를 확장하는 것입니다.

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

그런 다음 전화 :

$('.offer').find(':checkbox').toggleCheckbox();

---

경고 : attr () 또는 prop () 을 사용하여 확인란의 상태를 변경해도 내가 테스트 한 대부분의 브라우저에서 변경 이벤트 가 발생 하지 않습니다 . 확인 된 상태는 변경되지만 이벤트 버블 링은 없습니다. 확인 된 속성을 설정 한 후 변경 이벤트를 수동으로 트리거해야합니다. 확인란의 상태를 모니터링하는 다른 이벤트 처리기가 있었고 직접 사용자 클릭으로 제대로 작동합니다. 그러나 확인 된 상태를 프로그래밍 방식으로 설정하면 변경 이벤트가 일관되게 트리거되지 않습니다.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

---

다음 toggle기능을 사용할 수 있습니다 .

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

---

한 줄로 안되는 이유는 무엇입니까?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

---

chkDueDate다음과 같이 이름이 지정된 단일 확인란 과 클릭 이벤트가있는 HTML 개체가 있습니다.

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

HTML 객체 (이 경우 a <span>)를 클릭하면 확인란의 selected 속성이 토글됩니다.

---

jQuery : 가장 좋은 방법은 작업을 jQuery (jQuery = jQuery)에 위임하는 것입니다.

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

---

이것을 변경하십시오 :

$(this).find(':checkbox').attr('checked', true ); 

이에:

$(this).find(':checkbox').attr('checked', 'checked'); 

그것이 가능할지 100 % 확실하지는 않지만 비슷한 문제가 있었던 것 같습니다. 행운을 빕니다!

---

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

---

JQuery에서는 click ()이 토글을 위해 두 가지 함수를 허용한다고 생각하지 않습니다. 이를 위해 toggle () 함수를 사용해야합니다. http://docs.jquery.com/Events/toggle

---

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

---

가장 쉬운 솔루션

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

---

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

---

확인란 값을 전환하는 또 다른 대안 :

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

---

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

참고 URL : https://stackoverflow.com/questions/1467228/click-toggle-with-jquery