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

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>