<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);
}
}
ребята, мне нужна помощь... я уверен, что это что-то маленькое, что происходит неправильно
в основном у меня есть список цветов и вы хотите, чтобы пользователь выбирал max 3. когда пользователь выбирает четвертый, исходный выбранный флажок должен быть снят с отметки менее 3, когда пользователь выбирает цвет, который должен вызвать, и событие, когда я буду отправлять это через XMLHttpRequest позже.
мне нужно отправить максимум 3 цвета, так как c1 = & c2 = & c3 =
также, пожалуйста, объясните, как получить это им очень новое для этого.
помощь очень ценится
Этот Fiddle, который я сделал для другого вопроса, имеет не более двух флажков. Я использую,
$(parentId).find(":checkbox:checked").length < 2
чтобы проверка произошла.
Дайте вашим ячейкам имя класса 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>
<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, удалите первый идентификатор из массива.
Снимите галочку с всех флажков, затем проверьте только те поля, которые находятся в массиве.
Если пользователь вручную отключает окно, удалите его из массива.
Дайте мне знать, если у вас есть еще вопросы. Благодарю.
Вы можете переписать свою функцию 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/