Question 61390 in Twitter Bootstrap Question posted in

How to select two input fields with one radio button-Twitter bootstrap

So what am trying to do is bind two inputs fields into one radio button for users to select. The values for input fields will be generated dynamic but present for selection with a single radio button. I tried doing it bootstrap but did not work.

<!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="valu1">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="valu2">
  <label class="form-check-label" for="inlineRadio">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="val8">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="val12">
  <label class="form-check-label" for="inlineRadio">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="valu78">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="890">
  <label class="form-check-label" for="inlineRadio">3</label>
</div>
Tags:

2

Answers


  1. 0

    you should add the same name for every 2 buttons to make them work as expected.

    note: id should be unique in your HTML

    <!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" value="valu1">
  <input class="form-check-input" type="radio" name="name1" value="valu2">
  <label class="form-check-label" >1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name2" value="val8">
  <input class="form-check-input" type="radio" name="name2" value="val12">
  <label class="form-check-label" >2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name3" value="valu78">
  <input class="form-check-input" type="radio" name="name3" value="890">
  <label class="form-check-label" >3</label>
</div>
    Login or Signup to reply.
  2. 0

    This solution will cause all sibling radio buttons to be selected when one is selected.

    var buttons = document.querySelectorAll('.form-check-inline input:first-child');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        // this.parent.querySelectorAll('input')
        var children = this.parentNode.getElementsByTagName('input');
        for (var j = 0; j < children.length; j++) {
            children[j].checked = true;
        }
    });
}
    .form-check-inline input[type="radio"]:not(:first-child) {
    display: none;
}
    <!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="valu1">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="valu2">
  <label class="form-check-label" for="inlineRadio">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="val8">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="val12">
  <label class="form-check-label" for="inlineRadio">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="valu78">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="890">
  <label class="form-check-label" for="inlineRadio">3</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search