Help, I puzzle over which day it is necessary for this, in general, there is html:

<div class='some1'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some2'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some3'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div>

It is necessary to find out the values ​​of all checkboxes in this html and put them into an array, it should look something like this array['onononon','offonononon',....]

The problem is that you need to understand whether the checkbox is in a certain <div> and put it into an array, respectively. The output should be an array of strings of box values ​​in accordance with the <div> . I tried this:

 var numq = 3; // переменная в которой хранится количество divov на странице(она считает создаваемые дивы) var templatevar; //Временная переменная , для хранения строки var answers = [];//Переменная для ответов var workingclass = 'some1';//Начальный класс div for(var i = 0; i<numq; i++){ $('.some'+i+' input[type=checkbox]').each(function(){ if($(this).parent().prop('class')==workingclass){ templatevar += $(this).val(); // returns in var 'on' or 'off' as default } else{ answers.push(templatevar); templatevar = $(this).val(); workingclass = $(this).parent().prop('class'); } }); } console.log(answers);

But in the end, this code does not work. Tell me something.

  • How are you going to use this offonoff then? Why is the string needed? - vp_arth

3 answers 3

Run two cycles. One by div, and the second by nested checkboxes

 jQuery(function($) { $('#test').click(function() { var answers = []; $('div.check').each(function() { var answer = ''; $(":checkbox", this).each(function() { answer += (this.checked) ? "on" : "off" }); answers.push(answer); }); console.log(answers); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='check some1'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='check some2'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='check some3'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <button id="test">Test</button>

    In pure javascript (ES6):

     document.getElementById('test').addEventListener('click', () => { let divs = document.querySelectorAll('div[class^="some"]'), result = []; for (let div of divs) { let str = ''; let chkbxs = div.querySelectorAll('input[type="checkbox"]'); for (let chkbx of chkbxs) str += chkbx.checked ? 'on' : 'off'; result.push(str); } console.clear(); console.log(result.join('\n')); }); 
     <div class='some1'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some2'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some3'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <button id="test">Тест</button>

    I would advise you to use "1" and "0" instead of "on" and "off", respectively. If the lines are then transferred to the server script, it will be much easier to parse them. In the code, it is enough to change the lines in the ternary operator:

     str += chkbx.checked ? '1' : '0';

    or even simpler (and faster):

     str += +chkbx.checked;

    Even better, when there are few checkboxes (<32), generate numbers instead of strings using a bit shift . This will make the data more compact, and accelerate their analysis.
    That is, to shift the Boolean value of the checked property to a bit bit corresponding to the checkbox position in the parent element: the first checkbox is the zero bit (00000X), the second checkbox is the first bit (0000X0), and so on.
    In brackets, the 8-bit representation is used only for brevity. When bitwise operations, javascript allows the use of 32bit integers.

      Not so he is "not normal."

       function collect() { var answers = []; $("div input[type='checkbox']").each(function(){ var parentClass = $(this).closest("div").attr("class"); var parent = answers.find(item => item.parentClass == parentClass); if (!parent) { parent = { parentClass: parentClass, values: "" }; answers.push(parent); } parent.values += this.checked? "on" : "off"; }); answers = answers.map(item => item.values); console.log(answers); } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='some1'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some2'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <div class='some3'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> <button onclick="collect()">Click</button>

      • I understand that for someone this is quite a common question, but it was difficult for me to think of something like that. I'm not quite used to js yet - Mrage