Question

我试图允许点击包含一个检查箱的一块小块,以便选择这一检查箱。每当选择检查箱时,其母子就会改变肤色。在未当选时,父母亲亲生的亲子又回到原来的身边。

<>可见> 在检查箱中点击碎片的行为是正确的。然而,在直接点击检查箱时,行为与所期望的行为相反。我怀疑,这将造成双重点击: 检查箱自行点击手枪,并点击手瞄准其母体。我在这里可能是错误的。我怎么能够确定?

<>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>

www.un.org/Depts/DGACM/index_spanish.htm EDIT: The Swapped the backgroundnuts + 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

使用约束活动(jQuery 1.7+)。以下方法将:

Toggle colours on change of the checkbox (Use change instead of click to allow keyboard-initiated state changes).
Toggle the check state on clicking the <div>

Demo: 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");
    }
});

Answer 2

您不妨尝试使用<代码>label,然后在支票箱上使用<代码>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 3

大部分法典(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 4

你们只是要停止宣传:

// 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");
    }
});

Demo: http://jsfiddle.net/sPb9f/1/

友情链接