-1

Имеется код <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 ответа 2

1

Я не уверен, что понял до конца, но думаю, что стоит произвести рефакторинг задачи и кода. Однако вот вариант на 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(); можно вынести перед функцией, тогда обращение будет к глобальному массиву и значения будут храниться в памяти (если это действительно нужно).

2
  • Ну лейблы же...
    – Qwertiy
    24 окт 2016 в 12:56
  • @Qwertiy , лень было самому инпуты набирать, дернул с первой ссылки гугла :)
    – Rager
    26 окт 2016 в 12:06
-1

display: none влияет на работоспособность только в IE8.

Если IE8 не поддерживается, то так же, как для всех остальных чекбоксов.

Если поддерживается, заменять на position: absolute; с дополнительными фокусами, чтобы спрятать чекбокс. Точно не помню, подходит ли visibility: hidden.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.