jquery - 在所选单选按钮的相应文本字段前面添加唯一符号
问题描述
我有四个或更多带有单选按钮的选项以及相应的输入字段,如下所示:
我想*
在未选择的值#
前面和选定值的前面添加符号。
例如,如果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”实现了这个作为选定的值。如果选择的选项发生变化,我应该如何动态实现?
解决方案
尝试使用以下代码使其工作。
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>
推荐阅读
- javascript - 在 React 的 TextField 中无法识别新行 '\n'
- c# - 覆盖 XML 文件中的数据
- php - 在 Wordpress 中显示来自第二个数据库的文章
- asp.net-core - 如何在asp.net核心实体框架核心数据库优先方法中使用身份?
- apache-camel - Camel 2 中的 JCachePolicy
- java - 如何从 github 库构建 gradle jar
- google-apps-script - 如何以相同的顺序在 Googlesheet 中复制新数据
- python - 如何自动更新 pyinstaller 生成的 .exe 文件
- mongodb - Mongo Aggregate $project 变量作为字段名
- django - Django - 提交表单时无法获取模型选择 FK