Подтвердить что ты не робот

Как сделать группу флажков взаимоисключающими?

Мне нужно сделать взаимоисключающие флажки. Я столкнулся с многочисленными примерами, которые дают пример одной группы флажков. Например, http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.

В моем случае у меня много групп флажков на одной странице, поэтому я хочу, чтобы он работал как в этом примере. Пример asp.net codebehind приведен здесь, но я хочу сделать это в коде на стороне клиента.

Как я могу сделать это в JavaScript?

Я решил использовать универсальный флажок-флажок ajax. Решения, данные до сих пор, в основном основаны на переключателях. Эта ссылка действительно помогла мне. http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

4b9b3361

ОТВЕТЫ

Ответ 1

Использование взаимных флажков при нажатии кнопки "Радио" - это плохая идея, но вы можете сделать это следующим образом

HTML

<div>    
    Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
    Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
    Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>

<div>
    Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
    Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
    Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>

Jquery

$('div .checkbox').click(function () { 
                 checkedState = $(this).attr('checked');
                  $(this).parent('div').children('.checkbox:checked').each(function () {
                      $(this).attr('checked', false);
                  });
                  $(this).attr('checked', checkedState);
});

И вот fiddle

Ответ 2

Как я уже сказал в своем комментарии, вы действительно должны использовать для этого элементы <radio>. Дайте им одно и то же имя, и они работают почти так же:

<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>

Единственное существенное отличие состоит в том, что, как только один из них выбран, по крайней мере один из них должен быть включен (т.е. вы не можете их снова отключить).

Если вы действительно чувствуете необходимость делать это с помощью флажков, напоминайте себе, что пользователи с отключенным JavaScript смогут выбрать все варианты, если захотят. Если вы все еще чувствуете необходимость сделать это, вам нужно предоставить каждой группе флажков уникальное имя класса. Затем обработайте событие изменения каждого элемента флажка и снимите флажок со всех других элементов, соответствующих одному и тому же имени класса, как и щелкнутый элемент.

Ответ 3

Попробуйте следующее:

HTML

<div>
    Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
    Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
    Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
    Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>

<span>    
    Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
    Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
    Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">

    Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
    Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
    Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>

JavaScript/JQuery

$(':checkbox.radiocheckbox').click(function() {
    this.checked
        && $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className)
                  .prop('checked', false);
});​

Взаимные эксклюзивные флажки сгруппированы по контейнеру + имя + имя класса. Вы можете использовать разные группы в одном контейнере, а также использовать эксклюзивный флажок с эксклюзивным флажком с тем же именем. JavaScript-код сильно оптимизирован. Вы можете увидеть рабочий пример.

Ответ 4

Я надеюсь, что этот будет работать

HTML

A <input type="checkbox" class="alpha" value="A" /> | 
B <input type="checkbox" class="alpha" value="B" /> | 
C <input type="checkbox" class="alpha" value="C" /> 
<br />

1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="3" />

JavaScript

// include jQuery library
var enforeMutualExcludedCheckBox = function(group){
    return function() {
      var isChecked= $(this).prop("checked");
      $(group).prop("checked", false);
      $(this).prop("checked", isChecked);
    }
};

$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));
$(".num").click(enforeMutualExcludedCheckBox(".num"));

ну, переключатель должен быть тем, который будет использоваться во взаимно исключенных опциях, хотя я столкнулся с сценарием, когда клиент предпочел иметь нуль для одного выбранного элемента, а флажок javaScript'ed работает хорошо.

Update

Глядя на мой ответ, я понял, что излишне ссылаться на класс css дважды. Я обновил свой код, чтобы преобразовать его в плагин jquery, и создал два решения, в зависимости от предпочтений

Получить все флажки, чья проверка взаимно исключена

$.fn.mutuallyExcludedCheckBoxes = function(){
    var $checkboxes = this; // refers to selected checkboxes

    $checkboxes.click(function() {
      var $this = $(this),
          isChecked = $this.prop("checked");

      $checkboxes.prop("checked", false);
      $this.prop("checked", isChecked);
    });
};

// more elegant, just invoke the plugin
$("[name=alpha]").mutuallyExcludedCheckBoxes();
$("[name=num]").mutuallyExcludedCheckBoxes();

HTML

A <input type="checkbox" name="alpha" value="A" /> | 
B <input type="checkbox" name="alpha" value="B" /> | 
C <input type="checkbox" name="alpha" value="C" /> 
<br />

1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />

пример кода

Группировать все взаимоблокируемые флажки в содержащем элементе

JavaScript

$.fn.mutuallyExcludedCheckBoxes = function(){
    var $checkboxes = this.find("input[type=checkbox]");

    $checkboxes.click(function() {
      var $this = $(this),
          isChecked = $this.prop("checked");

      $checkboxes.prop("checked", false);
      $this.prop("checked", isChecked);
    });
};

// select the containing element, then trigger the plugin 
// to set all checkboxes in the containing element mutually 
// excluded
$(".alpha").mutuallyExcludedCheckBoxes();
$(".num").mutuallyExcludedCheckBoxes();

HTML

<div class="alpha">
A <input type="checkbox" value="A" /> | 
B <input type="checkbox" value="B" /> | 
C <input type="checkbox" value="C" /> 
</div>

<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" /> 
</div>

пример кода

Наслаждайтесь: -)

Ответ 5

Я думаю, это то, что вы хотите.

Рассмотрим HTML ниже:

<form action="">
    My favourite colors are:<br />
    <br />
    <input type="checkbox" value="red" name="color" /> Red<br />
    <input type="checkbox" value="yellow" name="color" /> Yellow<br />
    <input type="checkbox" value="blue" name="color" /> Blue<br />
    <input type="checkbox" value="orange" name="color1" /> Orange<br />
    <input type="checkbox" value="green" name="color1" /> Green<br />
    <input type="checkbox" value="purple" name="color1" /> Purple
</form>

Обратите внимание, что есть два имени для групп цветов: red, yellow, blue и orage, green, purple

И этот JavaScript, указанный ниже, будет работать в целом для всех checkbox на странице.

jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
    var checkbox = jQuery(value);
    checkbox.bind("click", function () {
        var check = checkbox.attr("checked");
        jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false);
        checkbox.attr("checked", check);
    });
});

Посмотрите на этот LIVE пример

Ответ 6

Независимо от того, где установлен флажок на вашей странице, вам просто нужно указать группу, и здесь вы идете!

    <input type='checkbox' data-group='orderState'> pending
    <input type='checkbox' data-group='orderState'> solved
    <input type='checkbox' data-group='orderState'> timed out

    <input type='checkbox' data-group='sex'> male
    <input type='checkbox' data-group='sex'> female

    <input type='checkbox'> Isolated


    <script>
       $(document).ready(function () {
          $('input[type=checkbox]').click(function () {
            var state = $(this)[0].checked, 
                g = $(this).data('group');
             $(this).siblings()
             .each(function () {
     $(this)[0].checked = g==$(this).data('group')&&state ? false : $(this)[0].checked;
             });
  });
 })</script>