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

4 回答

• 2

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

  回复于 2024-05-18T12:24:57+08:00
• 2

  您可能想尝试使用 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>
  

  回复于 2024-05-18T12:24:57+08:00
• 1

  我有点疯狂并重写了大部分代码（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") );
  

  回复于 2024-05-18T12:24:57+08:00
• 1

  你必须停止传播：

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

  回复于 2024-05-18T12:24:57+08:00