Entonces, lo que estoy tratando de hacer es vincular dos campos de entrada en un botón de opción para que los usuarios seleccionen. Los valores para los campos de entrada se generarán de forma dinámica pero estarán presentes para su selección con un solo botón de opción. Intenté hacerlo bootstrap pero no funcionó.
<!-- 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>debe agregar el mismo nombre para cada 2 botones para que funcionen como se espera.
nota: la identificación debe ser única en su 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>Esta solución hará que se seleccionen todos los botones de radio hermanos cuando se seleccione uno.
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>