單擊某些區域時切換復選框

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作為參數

click: function ()

代碼需要

$(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')");

更新場

---

具有功能

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