Имеется код <input type="checkbox" style="display: none;" name="array[]">
Дело в том, что данный чекбокс всегда находится в состоянии display: none;
а эмуляция чекбокса происходит через jquery, тобишь <div></div>
имеет статус активности <div class="checked"></div>
Как при событии on('click')
в массив array[]
заносить value="" выбранных чекбоксов? при условии что input type checkbox
всегда в display none?
2 ответа
Я не уверен, что понял до конца, но думаю, что стоит произвести рефакторинг задачи и кода. Однако вот вариант на vanilla:
document.getElementById('clickme').onclick=function(){
//установить класс для дива
var div=document.getElementById("thatdiv").className = "checked";
//создать пустой массив для данных
var variable = new Array();
//выбрать все включенные чекбоксы внутри элемента с классом checked
var chkd=document.querySelectorAll('.checked input:checked');
//пройти через все элементы, выбранные на предыдущем шаге
for (var i=0; i<chkd.length; i++){
//последовательно записать в массив все значения value каждого элемента
variable.push(chkd[i].getAttribute("value"));
}
//если ни один чекбокс не включен
if(chkd.length==0)
{//вывести информацию в p#info
document.getElementById('info').innerHTML='Перед нажатием на кнопку выделите checkbox!';}
else
{
//вывести в консоль значения в памяти
console.log(variable);
//установить значение value элемента array
document.getElementById('array').value=JSON.stringify(variable);
//вывести значение value элемента array
document.getElementById('info').innerHTML='Успешно. Значение checkbox#array ='+document.getElementById('array').value;
}
}
<div id="thatdiv">
<input type="checkbox" style="display: none;" id="array">
<input type="checkbox" name="option1" value="a1">Windows 95/98<Br>
<input type="checkbox" name="option2" value="a2">Windows 2000<Br>
<input type="checkbox" name="option3" value="a3">System X<Br>
<input type="checkbox" name="option4" value="a4">Linux<Br>
</p>
</div>
<p><a id="clickme">кликать сюда</a></p>
<p id="info"></p>
тоже самое с использованием jquery
$("#clickme").click(function(){
//установить класс для дива
$("#thatdiv").addClass( "checked" );
//создать пустой массив для данных
var variable = new Array();
//выбрать все включенные чекбоксы внутри элемента с классом checked,пройти через все и добавить в массив
$( ".checked input:checked" ).each(function() {
variable.push($( this ).val());
});
//если ни один чекбокс не включен
if($( ".checked input:checked" ).length==0)
{//вывести информацию в p#info
$("#info").html('Перед нажатием на кнопку выделите checkbox!');}
else
{
//вывести в консоль значения в памяти
console.log(variable);
//установить значение value элемента array
$("#array").val(JSON.stringify(variable));
//вывести значение value элемента array
$("#info").html('Успешно. Значение checkbox#array ='+$("#array").val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thatdiv">
<input type="checkbox" style="display: none;" id="array">
<input type="checkbox" name="option1" value="a1">Windows 95/98<Br>
<input type="checkbox" name="option2" value="a2">Windows 2000<Br>
<input type="checkbox" name="option3" value="a3">System X<Br>
<input type="checkbox" name="option4" value="a4">Linux<Br>
</p>
</div>
<p><a id="clickme">кликать сюда</a></p>
<p id="info"></p>
Также, в случае необходимости var variable = new Array(); можно вынести перед функцией, тогда обращение будет к глобальному массиву и значения будут храниться в памяти (если это действительно нужно).
-
-
@Qwertiy , лень было самому инпуты набирать, дернул с первой ссылки гугла :)– Rager26 окт 2016 в 12:06
display: none
влияет на работоспособность только в IE8.
Если IE8 не поддерживается, то так же, как для всех остальных чекбоксов.
Если поддерживается, заменять на position: absolute;
с дополнительными фокусами, чтобы спрятать чекбокс. Точно не помню, подходит ли visibility: hidden
.