Флажки с опцией «Все», но по-другому

Question

У меня есть список флажков, и один из них говорит «Все», но разница здесь в том, что мне не нужно выбирать все флажки, когда установлен флажок «Все», мне действительно нужно, чтобы они были сняты.

Звучит странно, но вот как мне это нужно.

Позвольте мне уточнить, что мне нужно:

Хорошо, список чекбоксов, которые я упомянул. Флажок «Все» установлен по умолчанию, и он должен быть снят, как только я отмечу любой из других флажков (потому что другие флажки на самом деле являются определенными субъектами).

Вот поворот: если пользователь выбирает все остальные флажки один за другим ... например, если он пытается выбрать их все, то в тот момент, когда пользователь нажимает на последний флажок, чтобы выбрать его, он фактически делает все выбранные флажки сняты, НО флажок «Все» установлен.

Имеет ли это смысл?

Вот мой старт HTML :

<label>
  <input type="checkbox" name="rb" value="all" id="all" checked>
  All</label>
<label>
  <input type="checkbox" name="rb" value="ln" id="ln">
  Option 1</label>
<label>
  <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv">
  Option 2</label>
<label>
  <input type="checkbox" name="rb" value="publications" id="publications">
  Option 3</label>
<label>
  <input type="checkbox" name="rb" value="comm" id="comm">
  Option 4</label>

Вот DEMO на случай, если вы захотите поработать с ним.

Любая помощь очень ценится.

Спасибо.

Answer 1

Прежде всего, зачем усложнять ваш вопрос обратной логикой на флажке «Все»?Просто назовите его «None» в вашем вопросе и измените метку на «All» в вашей фактической реализации.

Вот компоненты, которые вам понадобятся.

Добавьте класс в свои флажки,Ни один.Давайте назовем это «фу».<input type="checkbox" name="rb" value="ln" class="foo" id="ln">

Поместите функцию в разделе загрузки JQuery, которая выполняет действие "none".

$("#none").click(function ()(source)
{
    i=($(source).attr("checked")) == "checked" ? "" : "checked";
    $(":checkbox.foo").attr("checked",i);
};

Поместите функцию в разделе загрузки JQuery, которая устанавливает поле None всякий раз, когда другая кнопканажата

$(":checkbox.foo").click(function () 
{
    noneVal = "checked";
    $(":checkbox.foo").each(function (index) {
        if ($(this).attr("checked") == "checked")
        {
            noneVal = "";
            break;
        }
    })
    $('#none').attr("checked",noneVal);
});

Answer 2

Используйте этот код:

$('#all').change(function(){
    if ($('#all').attr('checked')) {
        $('input[type=checkbox][id!=all]').attr('checked', '');
    } else {
        $('input[type=checkbox][id!=all]').attr('checked', 'checked');
    }
});

Не забудьте добавить jQuery в ваш скрипт:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>

Answer 3

попробуйте что-то вроде this .

Я поставил флажки «not all» в контейнер div и затем использовал

$('#container :checkbox').change(function() {
    if ($('#container :checkbox:not(:checked)').length > 0) {
        $('#all').attr('checked', false);
    }
    else {
        $('#all').attr('checked', true);
    } 
});

Который можно написать более кратко(но немного менее читаемый) как

$('#container :checkbox').change(function() {
    $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length);
});

Answer 4

Ну, я придумал гибридный ответ между ответами fearofawhackplane и Marek.

Все флажки отмечены по умолчанию, и, конечно же, «Все» тоже.«Все» проверяет / снимает все флажки ... Я изменил эти две идеи по сравнению с первоначальным планом, который имеет мой смысл, имеет больше смысла, doh:).

Решение fearofawhackplane проверяет флажок «Все», когда все остальные флажкипроверяться / не проверяться один за другим;и решение Марека проверяет / снимает все флажки, хотя я немного изменил его код.

Это последний сценарий jQuery - можно ли его сократить?o_O:

$('#container :checkbox').change(function() {
  $('#all').attr('checked', !$('#container :checkbox:not(:checked)').length);
});


$('#all').change(function() {
  if ($('#all').attr('checked')) {
    $('input[type=checkbox][id!=all]').attr('checked', 'checked');
  } else {
    $('input[type=checkbox][id!=all]').attr('checked', '');
  }
});

И HTML - это тот, с небольшой модификацией, предложенной компанией fearofawhackplane:

<label>
  <input type="checkbox" name="rb" value="all" id="all" checked>
All</label>
<div id="container">
  <label>
    <input type="checkbox" name="rb" value="ln" id="ln" checked>
    Option 1</label>
  <label>
    <input type="checkbox" name="rb" value="prodsandserv" id="prodsandserv" checked>
    Option 2</label>
  <label>
    <input type="checkbox" name="rb" value="publications" id="publications" checked>
    Option 3</label>
  <label>
    <input type="checkbox" name="rb" value="comm" id="comm" checked>
    Option 4</label>
</div>

Вот DEMO финальной функциональности.

Спасибо всем.

Answer 5

Это работает с вашей демо:

<script type="text/javascript">
    var allId = 'all';

    function getCheckboxes() {
        return document.getElementById('checkboxes').getElementsByTagName('input');
    }

    function clearCheckboxes() {    
        var checkboxes = getCheckboxes();
        for(var i=0; i<checkboxes.length; i++) {
            if (checkboxes[i].id != allId) {
                checkboxes[i].checked = false;
            }
        }
    }

    function setCheckboxes() {        
        var allCheckbox = document.getElementById(allId);
        var checkboxes = getCheckboxes();
        var allChecked = true;
        for(var i=0; i<checkboxes.length; i++) {
            if (checkboxes[i].id != allId) {
                if (!checkboxes[i].checked) {
                    allChecked = false;
                }
            }
        }
        if (!allChecked) {
            allCheckbox.checked = false;
        }
        else {
            allCheckbox.checked = true;
            clearCheckboxes();
        }
    }
</script>
<div id="checkboxes">
<label>
    <input onclick="clearCheckboxes();" type="checkbox" name="rb" value="all" id="all" checked>
    All</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="ln" id="ln">
    Option 1</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="prodsandserv" id="prodsandserv">
    Option 2</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="publications" id="publications">
    Option 3</label>
<label>
    <input onclick="setCheckboxes();" type="checkbox" name="rb" value="comm" id="comm">
    Option 4</label>
</div>

Answer 6

Используйте следующий javascript для отметьте все и отметьте один флажок

function checkall()
{
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++)
    {
        document.getElementsByName("chkBox")[intCounter].checked = document.getElementById("chkAll").checked;
    }
}

function checkManual()
{
    var intCheckVal;
    intCheckVal = 1;
    for(intCounter=0; intCounter<(document.getElementsByName('chkBox').length); intCounter++)
    {
        if(document.getElementsByName("chkBox")[intCounter].checked == false)
            intCheckVal = 0;
    }
    if(intCheckVal == 1)
        document.getElementById("chkAll").checked = true;
    else
        document.getElementById("chkAll").checked = false;
}

Затем на отметьте все CheckBox onclick="checkall(); " И на флажок отметьте один флажок onclick="checkmanual();"

Answer 7

$("input").click(function() {

   var $this = $(this);
    if($this.is("[value=all]")) {
        var otherItems = $("input[type=checkbox][value!=all]");
        if ($this.is(":checked")) {
            otherItems.attr("checked", "").attr("disabled", "disabled")
        } else {
            otherItems.attr("disabled", ""); 
        }
    }

});