jQuery로 토글을 클릭하십시오

StackOverflow https://stackoverflow.com/questions/1467228

  •  13-09-2019
  •  | 
  •  

문제

마우스 오버와 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이므로 확인란을 사용하여 설정해야합니다. prop ~ 아니다 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 () 또는 소품() 확인란의 상태를 변경합니다 하지 않습니다 발사 이벤트 변경 내가 테스트 한 대부분의 브라우저에서. 점검 된 상태는 변경되지만 이벤트 버블 링은 없습니다. 확인 된 속성을 설정 한 후 변경 이벤트를 수동으로 트리거해야합니다. 다른 이벤트 처리기가 확인란 상태를 모니터링하는 몇 가지 이벤트 처리기가 있었고 직접 사용자 클릭으로 잘 작동합니다. 그러나 점검 된 상태를 프로그래밍 방식으로 설정하면 변경 이벤트가 일관되게 트리거되지 않습니다.

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>) 확인란의 확인 된 속성을 토글합니다.

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);
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top