单选按钮值选择器

Question

我正在尝试编写表格。在表单中将有一组单选按钮。当我在浏览器上打开 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;
}

Answer 1

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

如果将选择器从 ($("#tb").is(":checked")... 更改为 name selector 会怎样？

例如 ($("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>

然后你的函数可以return选择的文本

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

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

也许分享一个最小的工作示例 link 会有所帮助，因为我只是根据记忆写上面的内容，参考文档 (https://api.jquery.com/text/#text)。

Answer 2

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

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

Answer 3

这是在用户更改选中的单选按钮时获取用户输入的简单解决方案

$("[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()去除文字

前后的白色space

Answer 4

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

例如：

<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

单选按钮值选择器

Radio button value selector

html

javascript

forms

jquery

selector