Depende de algunas cosas:

¿Dónde quieres almacenar?

Si tiene la intención de almacenarlo en el navegador, puede usar localStorage o sessionStorage para hacerlo. Si desea almacenarlo en el servidor, deberá enviarlo de alguna manera, tal vez como datos de formulario, una solicitud AJAX o mediante WebSocket.

¿Cuándo quieres invocar la tienda?

Si desea invocar la tienda en cada cambio de valor, puede agregar un evento de change , como:

 let options = document.querySelectorAll("input[name=choosen]"); for (let option of options) { option.addEventListener('change', function() { storeCheckedOption(options); }); }

Hasta aquí todo bien. Ahora implementemos storeCheckedOption :

 function storeCheckedOption(options) { for (let option of options) { if (option.checked) { store("choosen", option.value); return; } } store("choosen", ""); }

Ahora implementemos store . Por ahora, asumo que tiene la intención de almacenarlo en localStorage , pero puede cambiar la forma en que se almacenan las cosas de la manera que desee:

 function store(key, value) { localStorage.[(value ? "set" : "remove") + "Item"](key, value); }

Naturalmente, también puede hacer esto con AJAX si tiene la intención de almacenarlo en el lado del servidor.

Sin embargo, si desea almacenar el botón de opción elegido en el servidor cuando se envía el formulario, entonces no necesita hacer nada en el lado del cliente. En su lugar, puede analizar los parámetros de solicitud en el lado del servidor y almacenar el elemento elegido allí.

Aquí está el código :)

 var store; $('button').on('click', function(){ let value = $('input[type=radio]:checked').parents('.input-group').find('input[type=text]').val(); store = value; console.log(store); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="choosen"> </div> </div> <input type="text" name="opt[]" /> <br /> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="choosen"> </div> </div> <input type="text" name="opt[]" /> <br /> </div> <br> <button>Store</button>

Puede obtener el valor del campo de entrada haciendo clic en el botón de radio. Asegúrese de agregar algo en el campo de entrada, antes de hacer clic en el botón de opción. Echa un vistazo al violín

 $('input[type=radio]').on('click', function() { var inputValue = $('input[type=radio]:checked').closest('.input-group').find('input[type=text]').val(); /* You can use let instead of var */ console.log(inputValue); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="choosen"> </div> </div> <input type="text" name="opt[]" /> <br /> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" name="choosen"> </div> </div> <input type="text" name="opt[]" /> <br /> </div>