在所选单选按钮对应的文本字段前添加唯一符号

Question

我有四个或更多带有单选按钮的选项以及相应的输入字段，如下所示：

我想在未选择的值前面添加符号 *，在选择的值前面添加 #。

例如，如果选择b，输出应该是

[*a #b *c *d]

如果选择d，输出应该是

[*a *b *c #d]

我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

        <div class="form-group" id="myForm">
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                        </br>
                                        <div class="input-group col-sm-3">
                                                <div class="input-group-prepend">
                                                  <div class="input-group-text">
                                                  <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                                  </div>
                                                </div>
                                                <input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
                                        </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>
                                    <div class="input-group col-sm-3">
                                            <div class="input-group-prepend">
                                              <div class="input-group-text">
                                              <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
                                              </div>
                                            </div>
                                            <input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
                                    </div>
                                    </br>                                
                                </div>

    <button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

JS:

function selectedRadioButton(){     
        selectedElement= $($('input[name=radiobutton]:checked').closest('.input-group').find("input[type=text]")).val();
        textbox1=document.getElementById("textbox1").value;
        textbox2=document.getElementById("textbox2").value;
        textbox3=document.getElementById("textbox3").value;
        textbox4=document.getElementById("textbox4").value;            
        cumulativeValue="["+"*"+textbox1+" #"+textbox2+ " *"+textbox3+ " *"+textbox4+ "]";
          }

这里，selectedElement是存储选中元素值的变量

我已将 "b" 作为选定值实施。如果选择的选项发生变化，我应该如何动态实施？

Answer 1

尝试使用以下代码使其工作。

function selectedRadioButton() {
  var selectedString = "";
  $('.form-group input[type=radio]').each(function() {
    var value = "*";
    if ($(this).is(":checked")) {
      value = "#";
    }
    value += $($(this).closest('.input-group').find("input[type=text]")).val();
    selectedString += " " + value;
  });
  console.log("[" + selectedString + "]");

}

$(document).ready(function() {
  console.log("ready!");
});

.abc {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group" id="myForm">
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" id="textbox1" class="form-control" aria-label="Text input with radio button">
  </div>
  </br>
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" id="textbox2" class="form-control" aria-label="Text input with radio button">
  </div>
  </br>
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" id="textbox3" class="form-control" aria-label="Text input with radio button">
  </div>
  </br>
  <div class="input-group col-sm-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" name="radiobutton" aria-label="Radio button for following text input">
      </div>
    </div>
    <input type="text" name="txtbox" id="textbox4" class="form-control" aria-label="Text input with radio button">
  </div>
  </br>
</div>

<button type="button" class="btn btn-primary" onclick="selectedRadioButton();">Download</button>

在所选单选按钮对应的文本字段前添加唯一符号

Adding unique symbol in-front of the selected radio button's corresponding text field

html

jquery

textfield

radio-button

bootstrap-4