切換複選框使用jQuery的父點擊

我有下面的代碼示例：http://jsfiddle.net/sX3w9/切換複選框使用jQuery的父點擊

$('.item').on('click', function() { 
      var checkbox = $(this).find('input'); 
      checkbox.attr("checked", !checkbox.attr("checked"));  
      $(this).toggleClass('selected'); 
     });

當一個用戶應該能夠點擊div.item和/或它裏面的複選框，應該選中或取消選中該複選框並從div中添加或刪除選定的類。

點擊div時，但點擊複選框瞬間它的工作原理再次取消選中它...

來源

2013-07-01 Cameron

你想要複選框做什麼？ – steo

看到這個http://jsfiddle.net/sX3w9/11/ – rab

那是因爲你既然複選框是div裏面......它正在其父div的單擊事件。。eventBubble（）。檢查點擊的元素是目標元素..如果是你想要的東西......

試試這個

$('.item').on('click', function(e) { 
    if(e.target==this){ 
     var checkbox = $(this).find('input'); 
     checkbox.prop("checked", !checkbox.prop("checked")); 
     $(this).toggleClass('selected'); 
    }else{ 
     $(this).toggleClass('selected'); 
    } 
});

fiddle here

來源

2013-07-01 10:12:52 bipen

我不認爲這是OP想要什麼適當的解決方案。如果您現在單擊複選框，則不會切換「selected」類。 – dirkk

可以ü現在檢查@dirkk ..它已經更新 – bipen

是的，這按預期工作。 – dirkk

試試下面的代碼：

$('.item').on('click', function() { 
      var checkbox = $(this).find('input'); 
      checkbox.attr("checked", !checkbox.attr("checked"));  
      $(this).toggleClass('selected'); 
     }); 
$(".item input").on("click", function(e){ 
    e.stopPropagation(); 
    $(this).parents(".item").toggleClass('selected'); 
});

問題是，當您檢查複選框單擊div發生時，它使checbox再次被取消選中。

來源

2013-07-01 10:14:55 cycaHuH

一個很好的解決方案，但它爲我工作.prop（），因爲在第一次點擊複選框沒有得到'檢查'屬性。 – chosta

-2

當您單擊複選框時，該事件被激發兩次。您需要停止複選框上綁定的事件，並像這樣綁定父元素上的事件。

http://jsfiddle.net/sX3w9/15/

$('.item').on('click', function() { 
var checkbox = $(this).find('input'); 

checkbox.click(function(e){ 
    e.stopPropagation(); 
}).attr("checked", !checkbox.attr("checked")); 

$(this).toggleClass('selected');

}）;

來源

2013-07-01 10:14:57

每次點擊'.item'就會將click事件綁定到'input checkbox'子 – rab

這將帶有標籤很好地工作：

<label for="checkboxid"> 
    <div class="item"> 
     <input type="checkbox" id="checkboxid" /> 
    </div> 
</label> 

$('#checkboxid').on('change', function() { 
    $('.item').toggleClass('selected'); 
});

來源

2013-07-01 10:19:14 Amani

你的代碼與格點擊，但點擊複選框取消選中瞬間正因爲如此，你寫代碼!checkbox.attr("checked")以取消選中複選框。

所以，如果你想做這項工作 - 首先你需要恢復Checked屬性。

Try This Example

有一個其他條件，在複選框每次點擊結合單擊事件覈實。所以如果你不想要這個，你需要檢查clicked Element。爲此，您使用event.toElement。

Try This Example

來源

2013-07-01 11:07:04

這是我用什麼：

$('body').on('click', '.item', function (event) { 
    if (event.target.tagName.toLowerCase() == 'input') return; 
    var objCheckbox = $(this).find("input[type=checkbox]"); 
    if (objCheckbox.length >= 1) { 
     objCheckbox.prop("checked", !objCheckbox.prop("checked")); 
    } 
}); 
$('body').on('click', 'input[type=checkbox]', function (e) { 
    $(this).parent().click(); 
    $(this).prop("checked", !$(this).prop("checked")); 
});

，如果你有你的頁面上的其他複選框不要綁定到body。

來源

2013-10-29 22:58:13 Parham

所有你需要做的是檢查點擊的事件目標，如果它是一個複選框，不做checked屬性的手動改變：

$(function() { 
    $(".item").on("click", function (e) { 
     if (!$(e.target).is(':checkbox')) { 
      var $checkbox = $(this).find("input[type='checkbox']"); 
      $checkbox.click(); 
     } 
     $(this).toggleClass('selected'); 
    }); 
}

注：可以使用$checkbox.prop("checked", !objCheckbox.prop("checked"));來切換複選框，但如果您的事件只觸發複選框的onclick，則$checkbox.click();效果最佳。

來源

2015-07-01 20:38:42

切換複選框使用jQuery的父點擊

回答

相關問題