Question

我有2个复选框，第三个用作＆＃34;全部切换＆＃34;。我有以下标准：

如果未选中其他2个复选框，则＆＃34;切换全部＆＃34;也应该取消选中。
当选中其他两个复选框时，＆＃34;切换全部＆＃34;也应该检查。
当只选中其中一个复选框时，＆＃34;切换全部＆＃34;应检查并禁用以显示＆＃34;半检查＆＃34;状态。

此外，应该可以点击＆＃34;切换全部＆＃34;检查或取消选中其他2（如果＆＃34;切换所有＆＃34;半检查，则应检查两者）。

我创建了以下JS / jQuery函数：

function setPdfDialogPriceCheckboxes(pElement)
{
    var tSuperCheckbox = jQuery("#superCheckbox").next();
    var tCheckbox1 = jQuery("#checkbox1");
    var tCheckbox2 = jQuery("#checkbox2");

    console.log(pElement.id);

    if(pElement.id == "superCheckbox")
    {
        tSuperCheckbox.click();
        var tCheckAll = tSuperCheckbox.is(':checked');
        if(tCheckbox1.is(':checked') != tCheckAll)
        {
            tCheckbox1.click();
        }
        if(tCheckbox2.is(':checked') != tCheckAll)
        {
            tCheckbox2.click();
        }
    }
    else
    {
        if(tCheckbox1.is(':checked') && tCheckbox2.is(':checked'))
        {
            tSuperCheckbox.prop('checked', true);
            tSuperCheckbox.prop('disabled', false);
        }
        else if(tCheckbox1.is(':checked') || tCheckbox2.is(':checked'))
        {
            tSuperCheckbox.prop('checked', true);
            tSuperCheckbox.prop('disabled', true);
        }
        else
        {
            tSuperCheckbox.prop('checked', false);
            tSuperCheckbox.prop('disabled', false);
        }
    }
}

此外，＆＃34;切换所有＆＃34;复选框有一个重叠的div阻止直接点击它，所以我可以处理onclick（） - 事件，即使禁用该复选框：

<div style="position: relative; ">
    <div id="superCheckbox" onclick="setPdfDialogPriceCheckboxes(this)" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; "></div>
    <input type="checkbox" />
</div>

我在这里创造了一个小提琴：http://jsfiddle.net/9mhag8b6/

适用于Firefox和Chrome，但Internet Explorer似乎只是忽略了重叠的div，让我直接点击该复选框。

我知道我可能会使用＆＃34;不确定＆＃34;在复选框上显示半检查状态，但我宁愿这样做。我目前的解决方法是使用图像，但在所有浏览器上看起来都是一样的，而复选框则不同。

非常感谢任何帮助。

Answer 1

演示http://jsfiddle.net/9mhag8b6/6/

为避免无法点击已禁用的复选框的问题，我们只需将其设为半透明。

你说你使用的是Jquery，你在部分做过。在这里，它充分利用了jQuery。

我使用了这个HTML，包含类，标签和没有onlick事件。每个复选框都不需要ID，您只需要专门识别所有复选框中的“超级复选框”。你真的应该避免将id分配给所有内容，并在它们的函数是同义的时候在你的javascript中单独引用它们，例如if (checkbox1.is(':checked') && checkbox2.is(':checked')) - 它使您的代码更加不整洁，并且不必要地大于它需要的代码。

<label><input type="checkbox" class="setPdfDialogPriceCheckboxes" id="superCheckbox" /> Preisanzeige</label>
<div class="indent">
    <label><input class="setPdfDialogPriceCheckboxes" type="checkbox" /> Preis</label>

    <label><input class="setPdfDialogPriceCheckboxes" type="checkbox" /> Ø-Preis</label>

</div>

JQuery的。使用.prop()代替.attr()，我们不必.trigger('change')，这会导致递归问题。您还将看到可以链接事件，而不是像tSuperCheckbox.prop('checked', true); tSuperCheckbox.prop('disabled', false);那样编写代码。变量赋值中的$表示它是一个jQuery对象，没有必要，它是一个偏好。

$(function(){
    $('.setPdfDialogPriceCheckboxes').on('change', function(){
        // assign these to make it easier to read and not look up > once
        var $superCheckbox = $('#superCheckbox');
        var $checkboxes = $('.setPdfDialogPriceCheckboxes').not($superCheckbox);
        // create a reduced list of the ones that are checked
        var $checkboxes_checked = $checkboxes.map(function(){ 
            if ($(this).is(':checked')) return true;
        });

        // supercheckbox does something different to the rest
        if ($(this).is($superCheckbox)){
            var check;
            // ignore current status of this checkbox, check all if < all are checked
            if ($checkboxes_checked.length == $checkboxes.length){
                // they are all checked
                check = false;
            }else{
                check = true;
            }

            $checkboxes.add($superCheckbox).prop({checked: check});
            $superCheckbox.css({opacity: 1});
        }else{
            // are they all checked?
            if ($checkboxes_checked.length == $checkboxes.length){
                // all checked
                $superCheckbox.prop({checked: true}).css({opacity: 1});
            }else if (!$checkboxes_checked.length){
                // none checked
                $superCheckbox.prop({checked: false}).css({opacity: 1});
            }else{
                // some checked
                 $superCheckbox.prop({checked: true}).css({opacity: 0.5});

            }
        }
    });
});

Answer 2

如何而不是将所有＆＃34;检查所有＆＃34;你只是淡出一点，在那种方式你仍然有一个可点击的复选框。下面是一个简单的例子：

/* CSS */ 
#toggle-all{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 9999;
} 
.some-toggle { /* you can add more styles if necessary */
  filter: alpha(opacity=50); /*IE*/ 
  opacity: 0.5;
}

/* HTML */
<label id="toggle-all">
  <input type="checkbox" id="toggle-all-checkbox"> Toggle All 
</label>
<div> 
  <label><input type="checkbox" id="checkbox1"> Checkbox 1 </label>
  <label><input type="checkbox" id="checkbox2"> Checkbox 2 </label>
</div>

/* JS */
$("#toggle-all-checkbox, #checkbox1, #checkbox2").on('click', function(){
  if (this.id == 'toggle-all-checkbox') {
    $('#checkbox1, #checkbox2').prop('checked', this.checked);
  } else {
    var checked1 = $('#checkbox1').prop('checked'),
        checked2 = $('#checkbox2').prop('checked');
    if (checked1 && checked2) {
      $('#toggle-all-checkbox').removeClass('some-toggle').prop('checked', true);
    } else {
      if (!checked1 && !checked2)
        $('#toggle-all-checkbox').removeClass('some-toggle').prop('checked', false);
      else
        $('#toggle-all-checkbox').addClass('some-toggle').prop('checked', true);
    }
  }
});

我还没有测试过这段代码，但我希望它能为您提供另外一个如何处理此代码的建议

如何防止单击基础复选框

2 个答案: