单选按钮值选择器

我正在尝试编写一个表单。表单中会有一组单选按钮。当我在浏览器上打开html页面时，我想单击其中一个按钮，然后在单击提交按钮后将其值写入文本。

这是表单代码的一部分：

<form method="post" action="" id="formToSave">
<dl>
<dt>Tipo di booster:</dt>
<dd><input type="radio" checked="checked" name="tb" value="1"/>
block
<input type="radio" name="tb" value="2" />
dark
<input type="radio" name="tb" value="3" />
f1b
<input type="radio" name="tb" value="0" />
custom
<p></p>
</dl>
</form>

这是我javascript代码的一部分：

function buildData(){
var txt =
"type = " + ($("[name='tb']").is(":checked") ? "block" : 
($("[name='tb']").is(":checked") ? "dark" : 
($("[name='tb']").is(":checked") ? "f1b" : "custom"))) 
return txtData;
}
$(function(){
// This will act when the submit BUTTON is clicked
$("#formToSave").submit(function(event){
event.preventDefault();
var txtData = buildData();
window.location.href="data:application/octet-stream;base64,"+Base64.encode(txtData);
});
});

但它目前工作不正常(它不会在txt中保存正确的选择(。

我该怎么修？提前感谢

更新：答案之一：

function buildData(){
var txtData =
"some text...  " +      $("[name=tipoBooster]").change(function() {
var txt = ["custom","block","dark","f1b"][this.value];
console.log(txt);
})          + "other text...";              

return txtData;
}

这里有一个简单的解决方案，当用户更改选中的单选按钮时，可以获得用户输入

$("[name=tb]").change(function() {
var txt = ["custom","block","dark","f1b"][this.value];
console.log(txt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" id="formToSave">
<dl>
<dt>Tipo di booster:</dt>
<dd><input type="radio" checked="checked" name="tb" value="1"/>
block
<input type="radio" name="tb" value="2" />
dark
<input type="radio" name="tb" value="3" />
f1b
<input type="radio" name="tb" value="0" />
custom
<p></p>
</dl>
</form>

但在你的情况下，你需要编辑构建函数，使其像这个

function buildData(){
return "type = " + ["custom","block","dark","f1b"][$("[name='tb']:checked").val()];
}

或者，如果您想要更灵活的解决方案，您可以在输入中添加标签像这个

$("[name='tb']").change(function() {
console.log($(this).parent().text().trim());
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form method="post" action="" id="formToSave">
<dl>
<dt>Tipo di booster:</dt>
<dd>
<label><input type="radio" name="tb" value="1" checked="checked" />block</label>
<label><input type="radio" name="tb" value="2" />dark</label>
<label><input type="radio" name="tb" value="3" />f1b</label>
<label><input type="radio" name="tb" value="0" />custom</label>
</dd>
<p></p>
</dl>
</form>

这是一个更改事件，但你的构建函数应该是这样的，然后

function buildData() {
return $("[name='tb']:checked").parent().text().trim();
}

解释：

$("[name='tb']:checked")获取已检查的无线电输入元素

.parent()获取其父级，因为我们需要标签来获取其文本

.text()获取标签的文本

.trim()删除文本前后的空白

您的选择器引用的是一个id，而不是name属性。试试这个。

var txt =
"type = " + ($("[name='tb']").is(":checked") ? "block" : 
($("[name='tb']").is(":checked") ? "dark" : 
($("[name='tb']").is(":checked") ? "f1b" : "custom")))

您可以使用：$("[name='tb']").val()，只需将实际单选按钮上的相应值设置为blockdark等。

例如：

<input type="radio" checked="checked" name="tb" value="block"/>
block
<input type="radio" name="tb" value="dark" />
dark
<input type="radio" name="tb" value="f1b" />
f1b
<input type="radio" name="tb" value="custom" />
custom

jQuery选择器中的#用于通过id属性进行选择。

如果您将选择器从($("#tb").is(":checked")...更改为名称选择器，该怎么办。

例如。($("input[name*='tb']").is(":checked")

如果您只想获取所选单选按钮的文本。你能把html更新为.吗

<form method="post" action="" id="formToSave">
<dl>
<dt>Tipo di booster:</dt>
<dd>

<input id="option1" type="radio" checked="checked" name="tb" value="1"/>
<label for="option1">block</label>
...
<p></p>
</dl>
</form>

然后，您的功能可以直接返回所选文本

function buildData(){
return "type = " + $("input[name*='tb']").is(":checked").next("label").text(); 
}

如果你不想在html中添加标签，那么我会尝试$("input[name*='tb']").is(":checked").next().text();

也许分享一个最低限度的工作示例链接会有所帮助，因为我只是在memmory中参考文档写上面的内容(https://api.jquery.com/text/#text)。

相关内容

最新更新

热门标签：