单选按钮是表单中使用的元素。它们让用户只选择有限数量的选项中的一个。
index.html： index.html： <body> <dialog class="dialog"> <form class="report__form" method="dialog"> <div> <input type="radio" name="report" vale="vulgar" /> <label for="vulgar">Vulgar/Offensive Language</label> </div> <div> <input type="radio" name="report" vale="duplicate" /> <label for="Duplicate">Duplicate</label> </div> <div> <input type="radio" name="report" vale="broken" /> <label for="broken">Broken</label> </div> <button class="dialog__submit">Submit</button> </form> </dialog> <button class="open">open dialog</button> <script src="script.js"></script> </body> 脚本.js： const dialog = document.querySelector(".dialog"); const reportForm = document.querySelector(".report__form"); const submitButton = document.querySelector(".dialog__submit"); const openButton = document.querySelector(".open"); openButton.addEventListener("click", () => { dialog.showModal(); }); 我很难弄清楚如何在 HTML 对话框中检索无线电输入值。我阅读了有关无线电输入的 MDN 文档，但仍在努力让它在对话框的上下文中工作。我认为我需要设置一个默认值，循环输入，并在单击其中之一时更新该值，但我无法让它工作。 首先，您需要为每个复选框提供一个 value 属性，而不是 vale 属性。从那里您可以在提交表单时选择 :checked 元素并根据需要进行处理。 另请注意，for元素中的label属性需要与复选框的id相匹配。由于您的复选框没有 id，因此这不起作用。虽然您可以通过将复选框包装在 label 元素中来简化此操作，但这样您根本不需要包含 for 属性。 这是经过上述更改后的工作示例： const dialog = document.querySelector(".dialog"); const reportForm = document.querySelector(".report__form"); const openButton = document.querySelector(".open"); openButton.addEventListener("click", () => { dialog.showModal(); }); reportForm.addEventListener('submit', e => { const selectedValue = reportForm.querySelector('input[type="radio"]:checked').value; console.log(selectedValue); }); <dialog class="dialog"> <form class="report__form" method="dialog"> <div> <label> <input type="radio" name="report" value="vulgar" /> Vulgar/Offensive Language </label> </div> <div> <label> <input type="radio" name="report" value="duplicate" /> Duplicate </label> </div> <div> <label> <input type="radio" name="report" value="broken" /> Broken </label> </div> <button class="dialog__submit">Submit</button> </form> </dialog> <button class="open">open dialog</button>
在函数内获取单选按钮一致的值以更新Wordpress用户数据
我有以下函数，其中包含处理配置文件表单的变量数组。除了“member-comptency[]”之外，所有其他都是典型输入。这是一个有几个点的选择字段...
如何在 Flutter 中使我的单选按钮完全充满活动颜色且没有白色边框？
我想用单一颜色完全填充我的单选按钮。 像这样 目前，单选按钮默认提供此布局。 那么我该如何改变这个呢？ 我的代码 收音机（ 值：3， ...
我正在做一个测验，最初是成功的 当答案选项只有“选项1、选项2、选项3”时 正确答案例如是“选项 2” 但当我...
我的目标是使用单选按钮创建手风琴选项卡。默认情况下会选中第一个选项卡，打开另一个选项卡会关闭当前选中的选项卡，依此类推... 但是，我的代码不起作用。我可以
我是毛伊岛的新手。在这里，我们可以选择创建 RadioButton，但是当涉及到 RadioGroup 时，我没有找到任何确切的解决方案。 我想创建单选按钮的动态列表。所以类似
我在一个 xml 文件中有两个无线电组： 我在一个 xml 文件中有两个无线电组： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/btn_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> <RadioButton android:id="@+id/btn_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> </RadioGroup> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/btn_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> <RadioButton android:id="@+id/btn_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onRadioButtonClicked" /> </RadioGroup> </LinearLayout> 在主要活动中，我可以通过实现 onRadioButtonClicked() 方法来处理单击侦听器上的单选按钮： public void onRadioButtonClicked(View view) { // Is the button now checked? boolean checked = ((RadioButton) view).isChecked(); // Check which radio button was clicked switch(view.getId()) { case R.id.btn_1: break; case R.id.R.id.btn_2: break; case R.id.R.id.btn_3: break; case R.id.R.id.btn_4: break; } } 现在，在同一个单选组中，如果选中一个单选按钮，则自动取消选中另一个。所以这是我的问题：我希望如果选中一个按钮，则取消选中同一组和另一组中的其他按钮。这可行吗？ 谢谢。 您可以手动完成。 case R.id.btn_1: btn3.setChecked(false); btn4.setChecked(false); break; case R.id.btn_2: btn3.setChecked(false); btn4.setChecked(false); break; case R.id.btn_3: btn1.setChecked(false); btn2.setChecked(false); break; case R.id.btn_4: btn1.setChecked(false); btn2.setChecked(false); break; 希望有帮助。 RadioGroup 上有一个 clearCheck() 方法。
.Net Maui：如何在 BindableLayout 内对单选按钮进行分组？
我正在开发一个 .Net Maui 应用程序，我必须使用单选按钮来允许用户从列表中选择一个项目。该列表又是另一个列表的一部分。整体结构就像 Item1(SubItem1,
如何让一组切换按钮像WinUI3中的单选按钮一样工作？ 对于下面的示例，如何实现以下 UI 行为： 您可以通过点击检查四个切换按钮之一...
您好，下面是代码，我尝试了很多方法，但无法获取所选单选按钮的值。如您所见，我需要在不同情况下获取该值。 您好，下面是代码，我尝试了很多方法，但无法获取所选单选按钮的值。如您所见，我需要针对不同情况获取该值。 <div style="display: inline-block"> <div> <a href="/Login/LogOut">Log Out</a><span> Welcome </span>YS User 1 noName </div> <br /> <br /> <br /> <br /> <input type="button" onclick="submitCreate();" value="New Survey" /><br /> <input type="button" onclick="submitEdit();" value="Edit Survey" /><br /> <input type="button" onclick="submitDelete();" value="Delete Survey" /><br /> <input type="button" onclick="submitPreview();" value="Preview Survey" /> </div> <div style="display: inline-block"> <div> <table class="MyTable"><thead><tr class="columnHead"><th scope="col"></th><th scope="col"><a href="/User/Index?sort=UserID&sortdir=ASC">CreatedBy</a></th><th scope="col"><a href="/User/Index?sort=CreatedDate&sortdir=ASC">Created Date</a></th><th scope="col"><a href="/User/Index?sort=IsRunning&sortdir=ASC">Is Running</a></th></tr></thead><tbody><tr><td> <input name="selected" id="1" type="radio" value="1" /></td><td>1</td><td>12/12/2011 3:43:57 PM</td><td>False</td></tr><tr class="altRow"><td> <input name="selected" id="2" type="radio" value="2" /></td><td>1</td><td>12/13/2011 4:42:37 PM</td><td>False</td></tr><tr><td> <input name="selected" id="3" type="radio" value="3" /></td><td>1</td><td>12/13/2011 6:27:38 PM</td><td>False</td></tr></tbody></table> </div> </div> </body> </html> <script type="text/javascript"> // var value = $$('input[name=selected]:checked')[0].get('value'); // var selectFoo; // $$('input[name=selected]').each(function (el) { // if (el.checked == true) { // selectFoo = el.value; // } // }); function getCheckedValue(radioObj) { if (!radioObj) return ""; var radioLength = radioObj.length; if (radioLength == undefined) if (radioObj.checked) return radioObj.value; else return ""; for (var i = 0; i < radioLength; i++) { if (radioObj[i].checked) { return radioObj[i].value; } } return ""; }; function submitCreate() { var adress = "/User/CreateSurvey/"; document.location = adress; }; function submitEdit() { var adress = "/Den/Index/" + getCheckedValue('selected'); document.location = adress; }; function submitDelete() { var adress = "/User/DeleteSurvey/" + getCheckedValue('selected'); document.location = adress; }; function submitPreview() { var adress = "/User/PreviewSurvey/" + getCheckedValue('selected'); document.location = adress; }; </script> 您可以使用 document.getElementsByName(<button_name>) 或 document.getElementsByTagName("input") 获取输入元素数组。循环遍历这些元素以检查哪个是 checked。 下面是如何从一组名为“selected”的单选按钮中获取选中按钮的值的示例： <html> <head> <script type="text/javascript"> function get_radio_value() { var inputs = document.getElementsByName("selected"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].checked) { return inputs[i].value; } } } function onSubmit() { var id = get_radio_value(); alert("selected input is: " + id); } </script> </head> <body> <form onsubmit="onSubmit();"> <input name="selected" value="1" type="radio"/>1<br/> <input name="selected" value="2" type="radio"/>2<br/> <input name="selected" value="3" type="radio"/>3<br/> <input type="submit" value="submit"/> </form> </body> </html> 我选择让所需功能的代码数量。下面给出了对我有用的 api.jquery.com。希望这对其他人有帮助。 HTML <input type="radio" name="option" value="o1">option1</input> <input type="radio" name="option" value="o2">option2</input> JavaScript var selectedOption = $("input:radio[name=option]:checked").val() 变量 selectedOption 将包含所选单选按钮的值（即 o1 或 o2）
如何将 WinUi 3 RadioButtons 设置为一组切换按钮？
我需要将一些分组单选按钮设置为切换按钮，如下所示，如何在 WinUi 中实现 这是在 WPF 中执行相同操作的问题。 将 WPF 单选按钮设置为切换按钮，并带有更正...
我编写了一个带有充当手风琴选项卡的单选按钮的代码。对于我的论坛，我需要能够在同一页面上多次发布完全相同的代码。我知道这可以通过简单地编辑...
我正在为学校开发一个程序，用户可以选择一个单选按钮来显示总统的图像。但是，单击按钮时我无法显示图像。我不知道在哪里...
尝试获取一个表单来加载之前检查过的无线电已经检查过的页面（在新加载时）。 该页面的提交内容作为 php 变量保存，我可以将其传递到 javascri...
我有两个单选按钮，想要发布所选按钮的值。 如何使用 jQuery 获取值？ 我可以像这样得到所有这些： $("形式：广播") 我怎么知道选择了哪一个？
如何默认检查 Blazor 中的 InputRadio 单选按钮
使用 Blazor 服务器，我尝试在表单中设置一些单选按钮并默认检查第一个按钮。 我在 EditForm 中使用 InputRadio 并设置 check="checked" 或 che...
点击我蓝色！ ... <body> <p> <input type="radio" class="custom-radio-blue" checked /> Click me blue! </p> <p> <input type="radio" class="custom-radio-red" checked /> Click me red! </p> <style> .custom-radio-blue { accent-color: #01adef; } .custom-radio-red { accent-color: red; } </style> </body> 在我上面的代码中，为什么红色收音机工作正常，为什么不使用强调色 css 属性的蓝色？ 我无法解释为什么每个浏览器的外观都有不同的决定，但是如果你将蓝色从 accent-color: rgb(1,153,255); 至 accent-color: rgb(1,152,255); 或来自 accent-color: rgb(33,152,255); 至 accent-color: rgb(34,152,255); 浏览器将根据颜色亮度内部决定内部颜色是黑色还是白色。因此，作为解决方案，我建议您选择亮度范围相同的颜色
有关带有 typescript 和 tailwind 的 next.js 应用程序中单选组中默认检查输入的错误
使用 next.js，我构建了一个网页，该网页接受用户的输入（用户从 3 个菜单中进行选择），然后显示包含所请求信息的 Chartjs 条形图。所有 3 个菜单都有默认值
我有一个通过 POST 提交的简单表单，大约有 60 个单选按钮组，如下所示： ja 我有一个通过 POST 提交的简单表单，大约有 60 个单选按钮组，如下所示： <label for="termin1_online_ja">ja</label> <input type="radio" name="termin1_online" id="termin1_online_ja" value="ja"> <label for="termin1_online_nein">nein</label> <input type="radio" name="termin1_online" id="termin1_online_nein" value="nein" checked=""> 不存在任何可能把事情搞砸的隐藏输入。所以 $_POST["termin1_online"] 的值应该是“ja”或“nein” - 但不知何故我有时会得到“1”。如果发生这种情况，似乎所有以“ja”和“nein”为值的单选按钮都会发生这种情况（有几个），但其他按钮不会发生这种情况。更奇怪的是，我只是返回（Chrome 后退按钮）并再次提交了完全相同的表单，没有更改任何内容，然后得到了正确的结果。 我不知道这怎么可能，也不知道从哪里开始寻找——几个月来没有对该表格进行任何更改，它曾经工作得很好，现在却引起了麻烦。 预先感谢！ 听起来您遇到了意外行为，其中 $_POST["termin1_online"] 的值有时为“1”，而不是预期的“ja”或“nein”。此行为可能是由多种因素引起的，包括客户端或服务器端问题。您可以采取以下一些故障排除步骤来诊断和解决问题： 检查 HTML 表单标记：确保 HTML 表单标记正确，并且每个单选按钮组具有唯一的名称属性。就您而言，您提供的标记似乎是正确的，但值得仔细检查。 检查请求负载：提交表单时，使用浏览器开发者工具（例如 Chrome 开发者工具）检查网络请求。验证 POST 请求中发送的表单数据是否包含单选按钮组的预期值。 检查 JavaScript 干扰：如果有任何 JavaScript 代码在提交前操作表单数据，请检查它以确保它不会干扰单选按钮值。 服务器端验证：实现服务器端验证以优雅地处理意外值。检查 $_POST["termin1_online"] 的值并确保它是“ja”或“nein”。如果不是，请适当处理错误（例如，记录错误、向用户显示消息）。 在不同浏览器中测试：在不同的网络浏览器中测试表单提交，看看问题是否特定于特定浏览器。 检查缓存：确保浏览器没有缓存以前的表单提交。清除浏览器缓存并再次测试，以确保您获得一致的结果。 检查服务器端配置：检查服务器端配置，包括 PHP 设置，以确保不存在可能导致意外行为的问题。 日志记录：在 PHP 代码中添加日志语句以记录 $_POST["termin1_online"] 的值和任何其他相关变量。这可以帮助您确定该值有时为“1”的时间和原因。
我用inputSelects，Inputexts和InputCheckboxes制作了一个表单，单选按钮是唯一给我带来问题的组件，我尝试将类型更改为int，bool和string，但它没有改变任何...