时间戳

首页 > 解决方案 > 根据单选输入值设置 if 条件

javascript - 根据单选输入值设置 if 条件

问题描述

我想设置 3 个无线电输入，如下所示，单击一个按钮并触发函数运行，其中 if 语句对应于无线电值。我敢肯定这很容易，但我把头发拉出来作为菜鸟。

<input type="radio" id="load_Template" name="settings" value="load_Template">
<label for="load_Template">Load Template</label><br>

<input type="radio" id="load_settings" name="settings" value="load_settings">
<label for="load_settings">Load Settings</label><br>

<input type="radio" id="reset_MFL" name="settings" value="reset_MFL">
<label for="reset_MFL">Reset MFL</label>

然后单击时有一个按钮将运行单击收音机的功能

<input id="LoadSettings" type="button" onclick="LoadSettings()" value="Load Settings">

这是要执行的脚本，与检查的无线电输入相对应

// IF RADIO INPUT FOR "LOAD_TEMPLATE" CHECKED THEN RUN THIS ONCLICK LOADSETTINGS
if (load_Template) {
 function AdjustSettings() {
  alert('load_Template');
 }
}

// IF RADIO INPUT FOR "LOAD_SETTINGS" CHECKED THEN RUN THIS ONCLICK LOADSETTINGS
if (load_settings) {
 function AdjustSettings() {
  alert('load_settings');
 }
}

// IF RADIO INPUT FOR "RESET_MFL" CHECKED THEN RUN THIS ONCLICK LOADSETTINGS
if (reset_MFL) {
 function AdjustSettings() {
  alert('reset_MFL');
 }
}

// CLICK THIS BUTTON TO TRIGGER WHICH IF STATEMENT MATCHES RADIO VALUE
function LoadSettings() {
  AdjustSettings();
}

标签： javascriptjquery

解决方案

建议：使用.addEventListener()而不是内联onclick...

然后，单击该按钮，查找选中的单选按钮。如果没有，什么也不做。如果有，获取它的值并比较它来决定做什么。

这使它成为一个单一的功能。

document.querySelector("#LoadSettings").addEventListener("click", function(e) {

  let checkedRadio = document.querySelector("[name='settings']:checked")
  if (!checkedRadio) return;

  let value = checkedRadio.value

  if (value === "load_Template") {
    alert('load_Template');
  }

  if (value === "load_settings") {
    alert('load_settings');
  }

  if (value === "reset_MFL") {
    alert('reset_MFL');
  }

})
<input type="radio" id="load_Template" name="settings" value="load_Template">
<label for="load_Template">Load Template</label><br>

<input type="radio" id="load_settings" name="settings" value="load_settings">
<label for="load_settings">Load Settings</label><br>

<input type="radio" id="reset_MFL" name="settings" value="reset_MFL">
<label for="reset_MFL">Reset MFL</label>

<br>
<input id="LoadSettings" type="button" value="Load Settings">

推荐阅读