There is a code <input type="checkbox" style="display: none;" name="array[]"> <input type="checkbox" style="display: none;" name="array[]"> The fact is that this checkbox is always in display: none; and the checkbox emulation takes place via jquery, tobish <div></div> has the status of <div class="checked"></div> as in the event of on('click') in the array[] put the value = "" selected checkboxes? Provided that input type checkbox always in display none?

    2 answers 2

    I’m not sure what I’ve understood until the end, but I think it’s worthwhile to refactor the task and the code. However, here’s a vanilla version:

     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>

    same with 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>

    Also, if necessary var variable = new Array (); you can put in front of the function, then the call will be to the global array and the values ​​will be stored in memory (if you really need it).

    • Well labels are the same ... - Qwertiy ♦
    • @Qwertiy, I was too lazy to type in the input myself, pulled Google’s first link :) - Rager

    display: none affects the performance only in IE8.

    If IE8 is not supported, then the same as for all other checkboxes.

    If supported, replace with position: absolute; with additional tricks to hide the checkbox. I do not exactly remember if visibility: hidden is suitable.