Question

嗨我想在我点击带文字的div时勾选或取消选中复选框。使用jquery 1.9.1 这里是js小提琴的链接

<div class="tel_show">
    <input type="checkbox" name="whatever" />
    &nbsp; visible
</div>

$("div.tel_show").live("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
        checkbox.attr("checked","true");
    } else {
        checkbox.attr("checked","");
    }
});

js fiddle link

Answer 1

jQuery 1.9.x上不推荐使用.live()，也不推荐使用checked html属性来切换复选框，而是使用.prop('checked')，更新的代码应为：

$("div.tel_show").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
});

请参阅working fiddle

Answer 2

使用.prop（）代替.attr（）和.live（）在1.9中删除，使用.on（）代替

$(document).on("click", "div.tel_show", function (event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) {
        return;
    }
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.prop("checked", !checkbox.is(':checked'));
});

演示：Fiddle

Answer 3

我的答案的另一个版本与其他两个版本完全相同，但由于它是一个初学者问题，我为新人添加了一些更好的做法。<\ n / p>

$('.tel_show').click(function( e ) { // emulate label on checkbox container
    if ( $(e.target).is('input[type="checkbox"]') ) return;

    $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});

为什么：

on（并且稍微慢于click）。它还有助于在阅读代码时快速确定将事件分配给一个元素（否则您将使用$('.parent').on('click','.children',function(){/*...*/})）
初始选择器不需要 - 如果没有 - 再次更快 - 无意义的div前缀。
没有明显的中间单用变量
利用jQuery API for prop而不是发明自己的方式来做常见的事情
选择器:checkbox和[type="checkbox"]是等效的，我选择后者为performs better on new browsers，但这很简单，您可以使用任何一个

div里面的复选框。单击选中或取消选中使用jquery 1.9.1

3 个答案:

为什么：