使用 jQuery 的三元运算符

Question

我正在尝试创建一个具有 4 个可能值的表单（类型：单选按钮）。 我想选择一个，然后将其值保存在 a.txt 文件中。

这是我的代码的一部分：

"Booster: " + ($("#tipoBooster").is(":checked")?"block I":"dark knight":"f1b":"custom")`

当我执行它时，它返回uncaught syntax error unexpected token ":" 。

我该如何修改它？ 您还可以链接一些在线示例吗？

我的想法是：我的表单带有这些单选按钮：

O block I   O dark knight   O f1b   O custom

如果我 select 一个，我想写"Booster: *selected one* "作为我的 output（一个字符串）。

你有什么建议？

Answer 1

您应该在决策中涉及的所有input[type=radio]元素的"change"上添加一个事件侦听器

每次检查输入时都会触发侦听器。 当一个收音机被取消检查时它不会被触发，因为另一个收音机被检查了，所以监听器的执行保证每次"change"只运行一次。

在事件侦听器中，您可以检查event.target.value属性以获取选中的单选按钮，然后您可以根据需要操作 DOM。

这是一个例子

Answer 2

我不是你想要做的 100%，但如果我理解正确，你可以做这样的事情：

<div>
  <input type="radio" name="tipoBooster" value="block I">
  <label>block I</label><br>
  <input type="radio" name="tipoBooster" value="dark knight">
  <label>dark knight</label><br>
  <input type="radio" name="tipoBooster" value="f1b">
  <label>f1b</label>
  <div id="showStr"></div>
</div>

 var divelm = $('#showStr');
 $("input[name='tipoBooster']").on('change', function() {
    if($(this).is(':checked')){
    divelm.text('Booster: ' + $(this).val());
  }
 });

如果您想稍微压缩一下，您可以使用 && 执行类似的操作，仅在左侧为真时运行右侧的语句：

var divelm = $('#showStr');
 $("input[name='tipoBooster']").on('change', function() {
    $(this).is(':checked') && divelm.text('Booster: ' + $(this).val());
 });

Answer 3

三元运算符只能有一个 else 跟随:

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

如果你想在一行中将它分解成多个三元表达式，但我不确定这是否是你要找的..

const isChecked = $("#tipoBooster").is(":checked");
const text = "Booster: " + (isChecked ? "block I" : (mySecondCondition ? "dark knight" : (myThirdCondition ? "f1b" : "custom")))

也就是说，我不能 100% 确定您想如何将其应用于建立广播组，但这里有一些很好的文档： https://developer.mozilla.org/en-US/docs/Web/HTML/元素/输入/无线电