CODEWITHSUNDEEP
javascriptjquery
Izzy
Izzy

Reputation: 6866

selecting radio button which matches the variable

I currently have a bootstrap tab panel which consists of 3 tabs. Each tab has various number of checkboxes (I do not have control over this they are populated dynamically). What I am trying to achieve is to select the radio button with the id that matches my variable lets say 3. However, if the id does not match I always want to select the last check box.

This is what I have come up with so far. 

var defaultSelection = 3;

if (defaultSelection) {
 var radioOptions = document.querySelectorAll('[name="firstSet"], [name="secondSet"], [name="thirdSet"]');

  for (var i = 0; i < radioOptions.length; i++) 
  {
     if (radioOptions[i].id === defaultSelection) 
     {
         document.querySelector("input[name=" + radioOptions[i].name + "][id=\'" + defaultSelection + "\']").checked = true;
     } else {
          //not entirly sure how to check the last item here in the particular tab
       }
     }
  }

Markup looks like:

<div class="d-flex flex-wrap">
<label class="radio-inline">
    <input type="radio" name="firstSet" id="1" value="1"> 1
</label>
<label class="radio-inline btn-sm">
    <input type="radio" name="firstSet" id="2" value="2"> 2
</label>
<label class="radio-inline btn-sm radio-active">
    <input type="radio" name="firstSet" id="3" value="3"> 3
</label>
<label class="radio-inline">
    <input type="radio" name="firstSet" id="4" value="4"> 4
</label>
<label class="radio-inline">
    <input type="radio" name="firstSet" id="5" value="5"> 5
</label>
</div>

<div class="d-flex flex-wrap">
<label class="radio-inline">
    <input type="radio" name="secondSet" id="25" value="25"> 25
</label>

<label class="radio-inline">
    <input type="radio" name="secondSet" id="27" value="27"> 27
</label>
</div>

<div class="d-flex flex-wrap">
<label class="radio-inline">
    <input type="radio" name="thirdSetSet" id="55" value="55"> 55
</label>
</div>

The above works to check the radio with the id which matches my variable but I'm not entirely sure how to select the last option in a particular tab if none are select or match my variable entry.

Any pointers would be helpful.

Upvotes: 0

Views: 38

Answers (1)

goto
goto

Reputation: 4425

One way you could go about this is by keeping track of whether the default radio button has been found and checked, and if that's not the case, then just check the last radio button.

Here's an example that implements this solution:

var defaultSelection = 3;

if (defaultSelection) {
  var firstSet = document.querySelectorAll('[name="firstSet"]');
  var secondSet = document.querySelectorAll('[name="secondSet"]');
  var thirdSet = document.querySelectorAll('[name="thirdSet"]');

  var tabs = [].concat(firstSet, secondSet, thirdSet);

  tabs.forEach(function(tab) {
    // keep track of whether default has been checked and
    // grab the last radio button from the tab
    var isDefaultChecked = false;
    var lastRadioButton = tab[tab.length - 1];

    for (var i = 0; i < tab.length; i++) {
      var radio = tab[i];
      var isDefaultSelection = parseInt(radio.id, 10) === 3;

      // check the default radio button and
      // set `isDefaultChecked` to true
      if (isDefaultSelection) {
        radio.checked = true;
        isDefaultChecked = true;
      }
    }

    // if no radio button was checked,
    // check the last radio button
    if (!isDefaultChecked) {
      lastRadioButton.checked = true;
    }
  });
}
<div class="d-flex flex-wrap">
	<label class="radio-inline">
		<input type="radio" name="firstSet" id="1" value="1" /> 1
	</label>
	<label class="radio-inline btn-sm">
		<input type="radio" name="firstSet" id="2" value="2" /> 2
	</label>
	<label class="radio-inline btn-sm radio-active">
		<input type="radio" name="firstSet" id="3" value="3" /> 3
	</label>
	<label class="radio-inline">
		<input type="radio" name="firstSet" id="4" value="4" /> 4
	</label>
	<label class="radio-inline">
		<input type="radio" name="firstSet" id="5" value="5" /> 5
	</label>
</div>

<div class="d-flex flex-wrap">
	<label class="radio-inline">
		<input type="radio" name="secondSet" id="25" value="25" /> 25
	</label>

	<label class="radio-inline">
		<input type="radio" name="secondSet" id="27" value="27" /> 27
	</label>
</div>

<div class="d-flex flex-wrap">
	<label class="radio-inline">
		<input type="radio" name="thirdSet" id="55" value="55" /> 55
	</label>
</div>

Upvotes: 1

Related Questions