установите максимум 3 флажка

0
<input type="checkbox" onchange="check(this.value)" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input type="checkbox" onchange="check(this.value)" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>






var queue = [];
function check(val1) {
    if(document.getElementById(val1).prop('checked',true))
    queue.push(val1);
    //alert(queue[0] + '-' + queue[1] + '-' + queue[2]);
    if (queue.length > 3) {
        var val2 = queue.shift();
        queue.push(val1);
        //alert(queue[0] + '-' + queue[1] + '-' + queue[2]);
        document.getElementById(val2).prop('checked', false);
    }
}

http://jsfiddle.net/Gg5Hv/

ребята, мне нужна помощь... я уверен, что это что-то маленькое, что происходит неправильно

в основном у меня есть список цветов и вы хотите, чтобы пользователь выбирал max 3. когда пользователь выбирает четвертый, исходный выбранный флажок должен быть снят с отметки менее 3, когда пользователь выбирает цвет, который должен вызвать, и событие, когда я буду отправлять это через XMLHttpRequest позже.

мне нужно отправить максимум 3 цвета, так как c1 = & c2 = & c3 =

также, пожалуйста, объясните, как получить это им очень новое для этого.

помощь очень ценится

  • 0
    Вероятно, вы можете просто сохранить массив выбранных флажков. Когда размер массива равен 3, и проверяется новый, удалите первый элемент, отменив его выбор, и добавьте новый в массив (таким образом, всегда сохраняя не более 3 в любое время).
  • 0
    Просто предложение: снятие флажка, который пользователь выбрал первым, когда установлен флажок более 3, не удобно для пользователя. Вы должны отключить непроверенные флажки, когда три отмечены.
Показать ещё 4 комментария
Теги:
checkbox

4 ответа

0

Этот Fiddle, который я сделал для другого вопроса, имеет не более двух флажков. Я использую,

$(parentId).find(":checkbox:checked").length < 2

чтобы проверка произошла.

0

Дайте вашим ячейкам имя класса chk, поэтому html будет:

<input class="chk" type="checkbox" onchange="check(this.value)" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>

И в jquery вы можете сделать вот так:

<script>
var count = 0;
$(function(){
  $('.chk').click(function(){
    if(count > 3) { count = 0; return;}
    else{
      if($(this).prop('checked')){
         // do something
         count++;
      }
    }
  });
});
<script>
0

ОБНОВЛЕНО: это будет работать за то, что вы спрашиваете: http://jsfiddle.net/Gg5Hv/11/

    <body>
        <input type="checkbox" value="red" id="red">
        <div style="background-color:red; width:50px; height:25px;"></div>
        <input type="checkbox" value="blue" id="blue">
        <div style="background-color:blue; width:50px; height:25px;"></div>
        <input type="checkbox" value="green" id="green">
        <div style="background-color:green; width:50px; height:25px;"></div>
        <input type="checkbox" value="yellow" id="yellow">
        <div style="background-color:yellow; width:50px; height:25px;"></div>
        <input type="checkbox" value="orange" id="orange">
        <div style="background-color:orange; width:50px; height:25px; "></div>
        <input type="checkbox" value="black" id="black">
        <div style="background-color:black; width:50px; height:25px;"></div>

        <script>
            var array = [];
            $("input").change(function () {
                if ($(this).is(":checked")) {
                    array.push(this.id);
                    if (array.length > 3) {
                        array.splice(0, 1);
                    }
                    $("input").prop("checked", false);
                    for (var i = 0; i < array.length; i++) {
                        $("#" + array[i]).prop("checked", true);
                    }
                }
                else {
                    var index = array.indexOf(this.id);
                    array.splice(index, 1);
                }
            });
        </script>
    </body>

(Если бы обновление, я забыл удалить элемент, если флажок был снят вручную)

Вот как это работает:

Во-первых, создайте массив для хранения всех идентификаторов флажков, которые проверяются.

Добавьте обработчик событий в каждый флажок.

Если установлен флажок, добавьте идентификатор в массив.

Если длина массива больше 3, удалите первый идентификатор из массива.

Снимите галочку с всех флажков, затем проверьте только те поля, которые находятся в массиве.

Если пользователь вручную отключает окно, удалите его из массива.

Дайте мне знать, если у вас есть еще вопросы. Благодарю.

0

Вы можете переписать свою функцию check следующим образом:

function check(val1) {
    var chk_arr =  document.getElementsByName("chk");
    var chklength = chk_arr.length;             
    var tot = 0;
    var i = -1;
    for(k=0;k< chklength;k++) {
        if (chk_arr[k].checked) { 
            tot++; 
            if (i < 0) i = k;
        }
        if (tot > 3) { chk_arr[i].checked = false; }
    } 
}

Просто укажите общее имя для всех флажков. Таким образом, не нужно передавать this из каждого флажка.

См. Обновленную скрипту: http://jsfiddle.net/Gg5Hv/7/

  • 0
    я изменил весь .prop (...) на check = true / false, что сделал это

Ещё вопросы

Сообщество Overcoder
Наверх
Меню