當某些區域被點擊時切換複選框

Question

我想要複選框直接點擊或者單擊其中任何一個沒有類valueButton的單元格時，選中/取消選中。

目前他們第一次工作，然後他們不再工作，因爲複選框不像最初一樣被選中/取消選中。

這裏是我的（錯誤）代碼行動CSS和HTML：

http://jsfiddle.net/jynn4/

而這裏僅僅是JavaScript的：

jQuery(document).ready(function() { 

     $(document).on({ 
      mouseenter: function() { 
       $("td:not('.valueButton')", $(this).parent()).addClass('blueHover'); 
      }, 
      mouseleave: function() { 
       $("td:not('.item')", $(this).parent()).removeClass('blueHover'); 
      }, 
      click: function() { 
       $("td:not('.valueButton')", $(this).parent()).toggleClass('blueChecked'); 

       if (event.target.type !== 'checkbox') { 
        $(':checkbox', $(this).parent()).attr('checked', function() { 
         return !this.checked; 
        }); 
       } 
      } 
     }, "tr.item td:not('.valueButton')"); 

    }); 

Answer 1

請檢查控制檯中的錯誤。

有在

if (event.target.type !== 'checkbox') { 

引用錯誤，因爲你還沒有把event作爲參數傳遞給你的

​​

代碼需要

$(document).on({ 
mouseenter: function() { 
    $("td:not('.valueButton')", $(this).parent()).addClass('blueHover'); 
}, 
mouseleave: function() { 
    $("td:not('.item')", $(this).parent()).removeClass('blueHover'); 
}, 
click: function (event) { 
    $("td:not(:eq(1))", $(this).parent()).toggleClass('blueChecked'); 

    if (event.target.type !== 'checkbox') { 
     if($(':checkbox', $(this).parent()).prop('checked')) 
      $(':checkbox', $(this).parent()).prop('checked', false); 
     else 
      $(':checkbox', $(this).parent()).prop('checked',true); 
    } 
} 
}, "tr.item td:not('.valueButton')"); 

UPDATED FIDDLE

---

隨着功能

$(':checkbox', $(this).parent()).prop('checked', function(){ 
    return !$(this).prop("checked"); 
});