0

我有一个包含多个复选框组的表单，每个复选框组都有一个相关的“全部”选项，单击该选项会取消选择所有相关的复选框。当检查任何相关的复选框时，该表格还需要取消选中“所有”选项。基本上，表单可以提交“全部”选项、任何相关选项或不提交选项。

选中任何复选框时，相关标签会变为粗体，包括“全部”选项。

我已经用jQuery编写了这种逻辑，但是，我似乎无法让一件能够正常工作 - 当检查了一个相关选项时，请删除“全部”选项。当用户单击相关选项之一时它会起作用，但它也会在刚刚选中后取消选中“全部”选项。

我想我的问题是，如何确定“源”事件是什么，以便确定是否运行那段代码？

带有“取消选择'全部'”的演示注释掉：http: //jsfiddle.net/8Ctvd/

JS：

$(function () {
    $(".all").change(function () {
        if ($(this).is(":checked")) $("input[rel='" + $(this).attr("rel") + "']:checked").not(".all").removeAttr("checked").change();
    });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) $("label[for='" + $(this).attr("id") + "']").css("font-weight", "bold");
        else {
            $("label[for='" + $(this).attr("id") + "']").css("font-weight", "normal");
            /* THIS UNCHECKS THE ALL EVERYTIME
            if  ($(this).not(".all"))
                $("input.all[rel='" + $(this).attr("rel") + "']").removeAttr('checked').change();
            */
        }
    });
});

HTML：

<INPUT id=items_All class="checkbox all" name=items value=ALL type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_All>All</LABEL>
<INPUT id=items_1 class=checkbox name=items value=1 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_1>Item 1</LABEL>
<INPUT id=items_2 class=checkbox name=items value=2 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_2>Item 2</LABEL>
<INPUT id=items_3 class=checkbox name=items value=3 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_3>Item 3</LABEL>
<br />
<INPUT id=widgets_All class="checkbox all" name=widgets value=ALL type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_All>All</LABEL>
<INPUT id=widgets_1 class=checkbox name=widgets value=1 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_1>Widget 1</LABEL>
<INPUT id=widgets_2 class=checkbox name=widgets value=2 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_2>Widget 2</LABEL>
<INPUT id=widgets_3 class=checkbox name=widgets value=3 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_3>Widget 3</LABEL>
4

2 回答 2

0

我通过使用相关复选框的“单击”事件来解决这个问题。这样，更改事件就不会触发它。

JS：

$('.all').change(function(){
    if ($(this).is(':checked'))
        $('input[rel="' + $(this).prop('rel') + '"]:checked').not('.all').removeProp('checked').change();
});

$('input[type="checkbox"]').change(function(e){
    var $label = $('label[for="' + $(this).prop('id') + '"]');

    if ($(this).is(':checked'))
        $label.css('font-weight', 'bold');
    else
        $label.css('font-weight', 'normal');
});

$('input[type="checkbox"]').not('.all').click(function(e){
    var $allCheckbox =
        $('input.all[rel="' + $(this).prop('rel') + '"]');

    if ($allCheckbox.is(':checked'))
        $allCheckbox.removeProp('checked').change();
});
于 2013-04-10T17:56:17.953 回答
0

编辑

我已经调整了 JS 以适应我误解的要求。部分问题是您的逻辑有点偏离，并且可以大大简化。将格式化逻辑分离到一个单独的函数中，您可以将格式化与检查分开查看。

$("input[type='checkbox']").change(function (e) {
    var $o = $(this);
    if ($o.hasClass("all")) {
        //all box was checked, uncheck others
        if ($o.prop("checked"))
            $("input[rel='" + $o.attr("rel") + "']").not(this).prop("checked", false);
    } else {
        // other box was checked, uncheck all
        if ($o.prop("checked")) {
            $("input.all[rel='" + $o.attr("rel") + "']").prop("checked", false);
        }
    }
    fixMarkup();
});

有关完整示例，请参见此处：http: //jsfiddle.net/8Ctvd/3/

原始答案

您正在使用attr，这会给您带来不可预测的结果。此外，使用.is速度比.prop. 您应该.prop在 jQuery 中使用，它被转换为布尔值并反映标签的当前状态，而不是其初始标记。请参阅此 SO 答案以供参考。

此外，您调用.change()finalnot('.all')会导致在“全部”复选框上触发更改事件。检查这个更新的小提琴。

http://jsfiddle.net/8Ctvd/1/

于 2013-04-10T16:42:40.547 回答