单选按钮值选择器

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

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

$("[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() 删除文本前后的空格

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']").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

Answer 4

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>

那么你的函数可以只返回选定的文本

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

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

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