javascript复选框功能只能运行一次

Question

Using Bootstrap 3.3.6, JQuery 1.11.3

I'm having an issue with a small section, specifically regarding selecting and deselecting a checkbox when the user clicks on the row.

jsfiddle here: http://jsfiddle.net/0ogdt9s7/1/

html

<div id="not-working">
  <h3>
  Click the text, then click the box
  </h3>
  <div class="selection-row" data-id="20">
    <div class="col-md-5">Data 20</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
    <div class="col-md-5">Data 22</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>
</div>

js

$(document).ready(function() {

  $(document).on("click", "div.selection-row", function() {
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });
});

The row selection works great, but if you click on the checkbox inside the row, the checkbox does not change. Clicking on 'Data' will change it correctly, but the checkbox is doing nothing.

Important to note:

It must reside inside $(document).on() because this is inside a popup which is displayed through AJAX.

I'm assuming this is something super simple, but I just cannot find it. Any help is appreciated.

Answer 1

You are getting an unexpected result because of the Bubbling phase .

The Bubbling phase of an event triggers all element's parents that are listening to the event from bottom to top:

In your case, when the user clicks the checkbox first time, it gets selected. Then the Blubbling phase takes place and starts to search for the closest parent that is listening to the event, if there's any, its handler (function) gets executed. You have one: selection-row .

The handler of the .selection-row element reverts what the default behavior of the checkbox did, so it's like the user hasn't done nothing.

If what you want is that when the user clicks the Data 20 or the Data 22 and the respective checkbox gets selected, you don't need to use javascript. A label element should solve that:

  <div class="selection-row" data-id="20">
  <div class="col-md-5"><label for="checkbox-20" >Data 20</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
  <div class="col-md-5"><label for="checkbox-22">Data 22</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>

Check it out: http://jsfiddle.net/0ogdt9s7/2/

As you said you need the entire row to be clickable, you may check if the original target of the event (the innermost element) is the input and let the default behavior do its job by interrupting the handler with a return; :

$(document).on("click", "div.selection-row", function(e) {
    if ($(e.target).is('input')) return;

    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });

Check this solution: http://jsfiddle.net/0ogdt9s7/6/

Answer 2

Coworker just solved it with a target check:

http://jsfiddle.net/0ogdt9s7/4/

$(document).ready(function() {
  $(document).on("click", ".selection-row", function(e) {
    var $target = $(e.toElement);
    if (!$target.is('input')) {
      console.log($target);
      var $cb = $('input[type="checkbox"]', $(this)),
        is_on = $cb.is(':checked');
      if (is_on) {
        //if its already checked, uncheck it
        $cb.prop('checked', false);
      } else {
        //if its not checked, check it
        $cb.prop('checked', true);
      }
    }
  });
});

Will keep this open for a bit to see if theres a better solution

Answer 3

you could change the element you are listening for clicks on to the text like this:

 $(".selector").click(function() { $(this).parent().find(".chkbox").trigger("click"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="not-working"> <h3> Click the text, then click the box </h3> <div data-id="20"> <div class="col-md-5 selector">Data 20</div> <div class="col-md-2"> <input class="chkbox" type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> </div> </div> <div data-id="22"> <div class="col-md-5 selector">Data 22</div> <div class="col-md-2"> <input class="chkbox" type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> </div> </div> </div> 

Answer 4

Ok here's a nice clean example with bootstrap's list-group

$(".list-group-item").click(function(event) {
  var target = $(event.target);
  if (target.is("input")) {
    $(this).trigger(click);
  } else {
    $(this).find(".chkbox").trigger("click");
  }
});

<ul class="list-group">
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
</ul>

DEMO