How to get multiple nested values using JavaScript or jQuery?

Question

On submitting a button I want to get the values of multiple checkboxes where each checkbox have radio buttons. I expect the output will be like if I check checkbox One and select its corresponding radio button L, checkbox Two and select its corresponding radio button M, checkbox Three and select its corresponding radio button C and it is not mandatory to check all the checkboxes, one may leave some checkbox empty. I want to get the selected item and its corresponding values only.

 var allCheckedItem = []; 
 $.each(jQuery("input[name='teeth']:checked"), 
   function(){ allCheckedItem.push($(this).val()); 
 }); 
 for (var i = 0; i < allCheckedItem.length; i++) 
 { 
  var eachItem = allCheckedItem[i]; 
  console.log(eachItem);
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One" />One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" />M
    		<input name='a' type="radio" id="rb2" value="L" />L
    		<input name='a' type="radio" id="rb3" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" />M
    		<input name='b' type="radio" id="rb5" value="L" />L
    		<input name='b' type="radio" id="rb6" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" />M
    		<input name='c' type="radio" id="rb8" value="L" />L
    		<input name='c' type="radio" id="rb9" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4"  value="Four"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" />M
    		<input name='d' type="radio" id="rb11" value="L" />L
    		<input name='d' type="radio" id="rb12" value="C" />C
    	</span>
        </li>
        <li><input type="submit" name="submit" value="SAVE"></li>
    </ul>
    </form>

I expect the output should be: One -> M , Two -> C , Three -> L

Your question lacks any attempt at solving this problem on your own. The idea is for you to try to get something to work and then come here with specific problems you are unable to resolve. Taking the tour and reading about How to ask a good question in the help center will provide all the information you need. — Randy Casburn
– Randy Casburn, Commented Jun 30, 2019 at 4:43
I have tried to solve the problem using the following, here I can get the checkbox value but unable to get corresponding radio button value: var allCheckedItem = []; $.each(jQuery("input[name='teeth']:checked"), function(){ allCheckedItem.push($(this).val()); }); for (var i = 0; i < allCheckedItem.length; i++) { var eachItem = allCheckedItem[i]; console.log(eachItem); } — Maher Hossain
– Maher Hossain, Commented Jun 30, 2019 at 5:05

Carsten Massmann · Accepted Answer · 2019-06-30 17:51:24Z

Here is another variation on the theme:

const getvals=()=>{var coll={};
 $(':radio:checked')
  .each((i,rb)=>
    $(rb).closest('li')
         .find(':checkbox:checked')
         .each((j,cb)=>coll[cb.value]=rb.value)
   )
 console.log(coll);
 return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One" />One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" />M
    		<input name='a' type="radio" id="rb2" value="L" />L
    		<input name='a' type="radio" id="rb3" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" />M
    		<input name='b' type="radio" id="rb5" value="L" />L
    		<input name='b' type="radio" id="rb6" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" />M
    		<input name='c' type="radio" id="rb8" value="L" />L
    		<input name='c' type="radio" id="rb9" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4"  value="Four"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" />M
    		<input name='d' type="radio" id="rb11" value="L" />L
    		<input name='d' type="radio" id="rb12" value="C" />C
    	</span>
        </li>
        <li><input type="button" onclick="getvals()" value="SAVE"></li>
    </ul>
    </form>

Erik Philips · Accepted Answer · 2019-06-30 18:52:29Z

Highly Recommended Reading: Decoupling Your HTML, CSS, and JavaScript.

One of the biggest problems you'll run into, is example code that only works with the current html. If you decide to change that html in just about any way, your code stops working (aka software brittleness). The following code extensible (meaning adding more checkboxes/radios will be easy to add, probably requiring no code changes), and should be easy to understand. Removing li or adding more html won't cause this code to stop working because it doesn't rely on html structure.

$(document).ready(function() {
  $('.js-save').on('click', function(e) {
    var $btn = $(e.currentTarget);
    var $form = $btn.closest('form');
    var $pre = $('.debug');
    $pre.text('');
    $form.find('input:not(".ignore-value")').each(function(_,input) {
      var $input = $(input);
      var value = $input.val();
      if ($input.is('[type=checkbox]')) {
        value = $input.prop('checked');
      }
      var name = $input.prop('name');
      $pre.append('name: ' + name + ':' + value + '\n');
      if ($input.hasClass('js-associate-value') && value) {
        var associatedValue = $($input.data('target')).val();
        if (associatedValue) {
          $pre.append(' - ' + associatedValue + '\n');
        }
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One"  class="js-associate-value" data-target="input[name=d]:checked"/>One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" class="ignore-value"/>M
    		<input name='a' type="radio" id="rb2" value="L" class="ignore-value"/>L
    		<input name='a' type="radio" id="rb3" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two" class="js-associate-value" data-target="input[name=d]:checked"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" class="ignore-value"/>M
    		<input name='b' type="radio" id="rb5" value="L" class="ignore-value"/>L
    		<input name='b' type="radio" id="rb6" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three" class="js-associate-value" data-target="input[name=c]:checked"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" class="ignore-value"/>M
    		<input name='c' type="radio" id="rb8" value="L" class="ignore-value"/>L
    		<input name='c' type="radio" id="rb9" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4" value="Four" class="js-associate-value" data-target="input[name=d]:checked"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" class="ignore-value" />M
    		<input name='d' type="radio" id="rb11" value="L" class="ignore-value" />L
    		<input name='d' type="radio" id="rb12" value="C" class="ignore-value" />C
    	</span>
        </li>
        <li><input class="js-save" type="button" name="submit" value="SAVE"></li>
    </ul>
    </form>
    <pre class='debug'></pre>

Collectives™ on Stack Overflow

How to get multiple nested values using JavaScript or jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related