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>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>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>