Question

我试图允许点击包含复选框的div，以便选中该复选框。只要选中该复选框，其父div就会改变颜色。未选中时，父div的背景颜色将恢复为原始颜色。

问题：点击复选框的div时的行为是正确的。但是，直接单击复选框时，行为与所需内容相反。我怀疑这是由于双击：复选框自己的点击处理程序，以及其父div的点击处理程序。我可能在这里错了。我该如何解决？

JS

// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
});

// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function() {
    if($(this).attr('checked')) {
        $(this).parent().parent().parent().css('background-color', "#FAFAFA");
    } else {
        $(this).parent().parent().parent().css('background-color', "#FFF");
    }
});

HTML

<div class="organizer_listing">

    <div class="organizer_listing_checkbox_container_container">
        <div class="organizer_listing_checkbox_container" data-listing_id=1234>
            <input type="checkbox" class="organizer_listing_checkbox" />
        </div>
    </div>

</div>

编辑：交换背景颜色+ e.stopPropagation（）

// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
    $(':checkbox', this).trigger('click');
});

// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
    e.stopPropagation();
    if($(this).attr('checked')) {
        $(this).parent().parent().parent().css('background-color', "#FAFAFA");
    } else {
        $(this).parent().parent().parent().css('background-color', "#FFF");
    }
});

Answer 1

您可能想尝试使用label，然后在复选框中使用change处理程序。单击与复选框关联的标签在功能上与单击复选框相同。通过使用change处理程序，您可以处理复选框值更改的所有事件。

<style>
   .organizer_listing_checkbox_container {
       display: block;
   }
</style>

<script type="text/javascript">
   $(function() {
       $(".organizer_listing_checkbox").on('change',function() {
           if ($(this).attr('checked')) {
               $(this).parent().parent().parent().css('background-color', "#FAFAFA");
           } else {
               $(this).parent().parent().parent().css('background-color', "#FFF");
           }
       });
    });
</style>

<div class="organizer_listing">

    <div class="organizer_listing_checkbox_container_container">
        <label class="organizer_listing_checkbox_container" for="listing_checkbox_0" data-listing_id=1234>
            <input id="listing_checkbox_0" type="checkbox" class="organizer_listing_checkbox" />
        </label>
    </div>

</div>

Answer 2

我有点疯狂并重写了大部分代码（demo）：

var update = function($el){
    // cycle through all elements
    $el.each(function(){
        var bkgd = $(this).prop('checked') ? "#FAFAFA" : "#FFF";
        $(this).closest('.organizer_listing_checkbox_container_container')
            .css('background-color', bkgd);
    });
};

// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
    var check = $(':checkbox', this);
    check.prop('checked', !check.prop('checked') );
    update( check );
});

// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
    e.stopPropagation();
    update( $(this) );
});

// update on initialization
update( $(".organizer_listing_checkbox") );

Answer 3

你必须停止传播：

// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
    e.stopPropagation();//so the click will not propagate to the div parent

    if($(this).attr('checked')) {
        $(this).parent().parent().parent().css('background-color', "#FFF");
    } else {
        $(this).parent().parent().parent().css('background-color', "#FAFAFA");
    }
});

Answer 4

使用on()绑定事件（jQuery 1.7+）。以下方法将：

在更改复选框时切换颜色（使用change代替click以允许键盘启动状态更改。
点击<div>

演示：http://jsfiddle.net/sPb9f/1/

// Click checkbox when its container is clicked
$('.organizer_listing').on('click', '.organizer_listing_checkbox_container_container', function(event) {
    if ($(event.target).hasClass('organizer_listing_checkbox')) {
        return; // Do nothing (checkbox)
    }
    $(':checkbox', this).each(function(){
        this.checked = !this.checked; // Swap check state
    }).trigger('change');
}).on('change', '.organizer_listing_checkbox', function(event) {
    // Highlight row on selecting Checkbox
    var $this = $(this),
        $main_listing = $this.closest('.organizer_listing');
    if (this.checked) {
        $main_listing.css('background-color', "red");
    } else {
        $main_listing.css('background-color', "yellow");
    }
});

使用jQuery标记复选框时避免双击

4 个答案:

演示：http://jsfiddle.net/sPb9f/1/