radio-button 相关问题

我怎样才能只给单选按钮的圆形轮廓上色？

我使用了 :hover 然后是 accent-color 但是当它被点击时它给整个按钮赋予了颜色。当我悬停时，我只希望圆圈改变颜色。例如图片中的按钮不是

Flutter中Radio button如何只选择一组值？

我正在使用 Flutter-Dart-SQLite 开发一个测验应用程序。在这里，我使用 RadioListTile 来实现单选按钮功能。我将文本值从一个数组传递给这个 StatefulWidget。 这是……

无法从我的单选按钮/复选框中获取值

createIrecButton.addEventListener("click", function (event) { 事件.preventDefault(); // 阻止表单提交 // 通过id获取表单 const myForm = document.getEleme...

如何在角度中预选第一个离子单选按钮

我需要帮助从生成的单选按钮列表中预选第一个单选按钮，如果用户选择不同的单选按钮，可以更改这些单选按钮... 我的尝试返回了这个错误：类型...

HTML/JS 表单不加值

我无法让我的表格将项链组件的价值相加以在我的网站上显示最终价格。 这是我的代码： 我无法让我的表格将项链组件的价值相加以在我的网站上显示最终价格。 这是我的代码： <div class="c-query"> <div class="c-title"> <h2 class="js-split"> Select diamond size</h2> </div> <div class="c-reply"> <div style="--order:1"> <input type="radio" name="diamondsize" id="1ct" value="450"> <label style="display:flex; align-items:center; justify-content:center;" for="design"> 1 ct  <span style="font-size:30px;">○</span></label> </div> <div style="--order:2"> <input type="radio" name="diamondsize" id="2ct" value="1000"> <label style="display:flex; align-items:center; justify-content:center;"for="des&amp;dev"> 2 ct  <span style="font-size:40px;">○</span></label> </div> <div style="--order:3"> <input type="radio" name="diamondsize" id="3ct" value="1500"> <label style="display:flex; align-items:center; justify-content:center;"for="mob-des"> 3 ct  <span style="font-size:50px;">○</span></label> </div> </div> </div> <div class="c-query"> <div class="c-title"> <h2 class="js-split"> Select length</h2> </div> <div class="c-reply"> <div style="--order:1"> <input type="radio" name="chainlength" id="16in" value="16in"> <label for="range1"> 16 inch: neckline</label> </div> <div style="--order:2"> <input type="radio" name="chainlength" id="18in" value="18in"> <label for="range2"> 18 inch: collarbone</label> </div> <div style="--order:3"> <input type="radio" name="chainlength" id="20in" value="20in"> <label for="range3"> 20 inch: collar to bust</label> </div> <div style="--order:4"> <input type="radio" name="chainlength" id="22in" value="22in"> <label for="range4"> 22 inch: bust</label> </div> </div> </div> <div class="c-query"> <div class="c-title"> <h2 class="js-split"> Select metal</h2> </div> <div class="c-reply"> <div style="--order:1"> <input type="radio" name="Source" id="ag925" value="299"> <label for="awww"> Silver 925</label> </div> <div style="--order:2"> <input type="radio" name="Source" id="au18" value="2999"> <label for="insp"> Gold 18K</label> </div> <div style="--order:3"> <input type="radio" name="Source" id="pl950" value="1999"> <label for="behance"> Platinum 950</label> </div> <div style="--order:4"> <input type="radio" name="Source" id="pd950" value="2999"> <label for="other"> Palladium 950</label> </div> </div> </div> <script> let diamondSizeValue = 0; let metalValue = 0; document.querySelectorAll('input[name="diamondsize"]').forEach(input => { input.addEventListener('change', function() { diamondSizeValue = this.value; console.log('Diamond size value:', diamondSizeValue); updateTotalPrice(); }); }); document.querySelectorAll('input[name="Source"]').forEach(input => { input.addEventListener('change', function() { metalValue = this.value; console.log('Metal value:', metalValue); updateTotalPrice(); }); }); function updateTotalPrice() { const totalPrice = parseInt(diamondSizeValue) + parseInt(metalValue); document.querySelector('#total_price').innerHTML = `Total price: $${totalPrice}`; console.log('Total price:', totalPrice); } </script> <h1 class="js-split"> Price with shipping to <p id="country-name">your home</p></h1> <p class="js-split"> <p id="currency-sym"></p> <h2 id="total_price"></h2> 我希望此代码在选择单选按钮时显示将两个值相加的总价，但它显示为：“$”，我不确定如何修复它。感谢所有帮助。 编写表格的正确方法。 const myForm = document.forms['my-form'] // All element's form parent. , prices = { diamondsize : { '1ct': 450, '2ct':1000, '3ct':1500 } , chainlength : { '16in': 1600, '18in':1800, '20in':2000, '22in':2200 } , metal : { 'ag925': 299, 'au18':2999, 'pl950':1999, 'pd950':2999 } }; myForm.oninput = updateTotalPrice; // for any input elements change myForm.onreset = () => { myForm.totalPrice.textContent = 0; // ^-- use forms names } myForm.onsubmit = e => { e.preventDefault(); // disable submit for testing. updateTotalPrice(); console.log( 'result -> ', JSON.stringify( Object.fromEntries( new FormData( myForm )))); setTimeout( console.clear, 7000); } function updateTotalPrice() { let total = 0 , entries = Object.fromEntries( new FormData( myForm )) // get all inputs values ; for (let key in entries) total += prices[key][entries[key]]; myForm.totalPrice.textContent = total; } body { font-family : Arial, Helvetica, sans-serif; font-size : 16px; } fieldset { margin : 1em; padding : 1em; width : 44em; min-width : 44em; } legend { padding: 0 .5em; } label { margin : .4em 1em .3em .5em; } span[data-circle]::before { box-sizing : border-box; display : inline-block; content : ''; border : 1px solid black; border-radius : 50%; margin-left : .5em; } span[data-circle="30"]::before { width : 30px; height : 30px; } span[data-circle="40"]::before { width : 40px; height : 40px; } span[data-circle="50"]::before { width : 50px; height : 50px; } .as-console-wrapper {max-height: 100% !important;top: 0;} .as-console-row::after {display: none !important;} .as-console-row-code { background-color: yellow;} <form name="my-form"> <fieldset> <legend>Diamond size</legend> <label> <input type="radio" name="diamondsize" value="1ct" required> 1 ct <span data-circle="30"></span> </label> <label> <input type="radio" name="diamondsize" value="2ct"> 2 ct <span data-circle="40"></span> </label> <label> <input type="radio" name="diamondsize" value="3ct"> 3 ct <span data-circle="50"></span> </label> </fieldset> <fieldset> <legend>Length</legend> <label> <input type="radio" name="chainlength" value="16in" required> 16 inch: neckline </label> <label> <input type="radio" name="chainlength" value="18in"> 18 inch: collarbone </label> <label> <input type="radio" name="chainlength" value="20in"> 20 inch: collar to bust </label> <label> <input type="radio" name="chainlength" value="22in"> 22 inch: bust </label> </fieldset> <fieldset> <legend>Metal</legend> <label> <input type="radio" name="metal" value="ag925" required> Silver 925 </label> <label> <input type="radio" name="metal" value="au18"> Gold 18K </label> <label> <input type="radio" name="metal" value="pl950"> Platinum 950 </label> <label> <input type="radio" name="metal" value="pd950"> Palladium 950 </label> </fieldset> <br> <br> Total Price : <output name="totalPrice">0</output> <br> <br> <button type="submit">submit</button> <button type="reset">Reset</button> </form>

在 Angular 10 中制作单选按钮

我有 2 个带有单选按钮的双选项问题作为答案。我怎样才能使单选按钮成为必需的，以便在没有回答时显示一条消息？ 这篇文章解释了如何要求收音机 b...

如何使用 javascript 打开和关闭带有单选按钮的下拉子菜单？

我目前有一个完全用 html 和 css 编写的下拉菜单，我目前具有以下功能：如果用户单击菜单中的一个选项 - 它将通过隐藏的

带有原始 HTML 的表单中的单选输入中的多个值

我的目标是为我网站上的一个小组件创建一个表单来处理禁用的 JavaScript 体验。目前我有以下表格： 我的目标是为我网站上的一个小组件创建一个表单来处理禁用的 JavaScript 体验。目前我有以下表格： <form method="GET" action="https://mywebsite.com/somedirectory/"> <input type="radio" id="uid1" name="someParam" value="fruity" /> <label for="uid1">Fruit</label> <input type="radio" id="uid2" name="someParam" value="veggie" /> <label for="uid2">Vegetable</label> ...other radio options <input type="submit" value="Submit" /> </form> 单击任一单选选项然后单击提交按钮将导致： option 1: https://mywebsite.com/somedirectory/?someParam=fruity option 2: https://mywebsite.com/somedirectory/?someParam=veggie 如何为每个单选选项添加另一个值？假设我想传递 someOtherParam ，这对于每个选项都是唯一的，我想将其作为我的选项的输出： option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper 我试过的是： <input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" /> <input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" /> 然而，& 符号在链接内被转换为 %26 并且感觉太 hacky 了。有没有更好的方法来实现这一目标？另外，有没有办法确保只有在选择了单选选项后才启用提交按钮？ 附言我的目标是不涉及 Javascript 的纯 HTML 体验。这可能吗？ 我很确定这在不使用 JS 的现代浏览器中是不可能的。也许在旧浏览器上，您可以使用 CSS 和 display:none 做一些技巧，因为 它过去不使用 display:none 发送字段，但现在这不是一个选项。 如果允许 Javascript，则可以向每个单选选项添加一个数据属性，并使用它来填充更改时的额外隐藏输入。 document.querySelectorAll('input[type=radio][name="someParam"]') .forEach(radio => radio.addEventListener('change', (event) => document.getElementById('someOtherParam').value = event.target.dataset.extraValue )); <form method="GET" action="https://mywebsite.com/somedirectory/"> <input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" /> <label for="uid1">Fruit</label> <input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" /> <label for="uid2">Vegetable</label> <input type="hidden" id="someOtherParam" name="someOtherParam"> <input type="submit" value="Submit" /> </form> 要添加另一个独立于其他无线电组，请使用不同的 name 属性。例如，要向请求添加名为 someOtherParam 的第二个参数，请使用 name="someOtherParam" 创建一个单选组： <input type="radio" id="uid3" name="someOtherParam" value="apple" /> <input type="radio" id="uid4" name="someOtherParam" value="pepper" /> 并添加他们对应的标签。 另外，有没有办法确保只有在选择了单选选项后才启用提交按钮？ 您可以添加 required 属性以防止浏览器在所有输入都具有值之前发送表单。 没有javascript，你所描述的就无法完成。 正如其他海报所建议的那样，您可以做的是： 为每个类别（水果/蔬菜等）可能的选项列表创建单选按钮 <input type="radio" id="uid3" name="someOtherParam" value="apple" /> <input type="radio" id="uid4" name="someOtherParam" value="pepper" /> 在处理服务器端代码的输入时，检查您是否收到了一个值。如果没有，您可以选择默认选项（苹果或其他）。在您的页面上，您可以提及默认选项是什么，以防他们不进行选择。 您可以按照建议进行一些输入required，但您仍然需要在服务器端检查是否已收到输入，因为 required 属性只是对用户浏览器的建议 - 它不会停止恶意人员通过运行脚本等发出没有该参数的请求 要向服务器提交额外信息，您可以使用 hidden 输入类型并使用 javascript 根据您的需要更改值。 HTML代码 <form method="GET" action=""> <input type="radio" id="uid1" name="someParam" value="fruity" /> <label for="uid1">Fruit</label> <input type="radio" id="uid2" name="someParam" value="veggie" /> <label for="uid2">Vegetable</label> <input type="hidden" id="uid3" name="someOtherParam" value="" readonly required /> <input type="submit" value="Submit" onclick="onSubmit()" /> </form> Javascript代码 function onSubmit () { let fruityRadio = document.getElementById( 'uid1' ); let veggieRadio = document.getElementById( 'uid2' ); if ( fruityRadio.checked ) { document.getElementById( 'uid3' ).value = 'apple'; } else if ( veggieRadio.checked ) { document.getElementById( 'uid3' ).value = 'pepper'; } } 简单，用每个额外值之间的分隔符将值加倍： HTML <div> <label for="uid1"> <input id="uid1" name="fruit1" type="radio" value="apple:orange" /> Fruit, Apple + Orange </label> </div> <div> <label for="uid2"> <input id="uid2" name="fruit1" type="radio" value="apple:cherry:lime" /> Fruit, Apple + Cherry + Lime </label> </div> 节点.js 我不确定 node.js 如何处理 PHP 简单地称为 $_POST['name_attribute_value_here'] 的内容，尽管我知道您只是想使用 .split(':') 从该单一表单中获取 两个或更多值。如果您希望每个单选按钮有更多选项，只需在每个值之间附加一个分隔符（不必是:）。 这两个radio选项都有name“fruit1”所以用户不能同时选择。 不需要JavaScript。 服务器端的小改动 如果用户没有选择那个 radio 表单字段，额外的值显然 not 出现在服务器上。 数组 如果您想设置自己的键/值，只需添加第二个分隔符： <input name="fruit1" value="fruit:apple,fruit:lime,color:purple,planet:Earth" /> 然后在服务器上使用 [whatever].split(',') 获取对并循环迭代以获取每个键/值。如果你真的愿意，你可以创建一个完整的疯狂多维数组。 希望这对您有所帮助，如果您需要任何进一步的说明，请随时发表评论。 生成表格： const data = [ { name: 'apple', type:"fruity" }, { name: 'pepper', type:"veggie"} ] const form = document.querySelector('form'); const uid = document.querySelector('#uid') createOptions(data); function createOptions(data){ data.forEach((e, index) => { const f = document.createDocumentFragment(); const l = document.createElement('label'); const i = document.createElement('input'); l.setAttribute('for', `uid${index+1}`); l.textContent=e.name; i.setAttribute('type', `radio`); i.setAttribute('for', `uid${index+1}`); i.setAttribute('name', 'someOtherParam'); i.setAttribute('value', e.name); i.dataset.otype = e.type; f.appendChild(l); f.appendChild(i); form.insertBefore(f, uid); i.addEventListener('change', onselectChange, false); }) } function onselectChange(event) { uid.value = event.target.dataset.otype; } <form method="GET" action="https://mywebsite.com/somedirectory/"> <input type="text" id="uid" name="someParam" style="width:0; visibility: hidden;"> <input type="submit" value="Submit" /> </form> 我想不出另一种使用更少代码的方法，以下实现了您想要的结果： <form name="form" method="GET" action=""> <input type="radio" id="uid1" name="someParam" required value="fruity" onchange="document.form.someOtherParam.value = 'apple'" /> <label for="uid1">Fruit</label> <input type="radio" id="uid2" name="someParam" required value="veggie" onchange="document.form.someOtherParam.value = 'pepper'" /> <label for="uid2">Vegetable</label> <input type="hidden" name="someOtherParam" value=""/> <input type="submit" value="Submit"/> </form> 您的示例只有 3 个更改： 在name中添加一个form 将内联属性required和onchange添加到每个radio 添加一个input[type=hidden]以包含额外的参数。 第一个更改意味着您以后不需要document.getElementById，第二个更改因此表单不会为空提交并更新hidden所需的值。

根据单选按钮选择显示视图

感谢您理解我缺乏英语技能。 我正在用 java 开发一个 android 应用程序。有没有办法根据A单选按钮和B单选按钮的选择来改变6个按钮的组

How do I css checkbox and radio button in a form?

我想这样显示： 你在： ()欧洲 ()非洲 ()澳大利亚 ()亚洲 ()美洲 你的爱好是什么: []游泳 []烹饪 []购物 []运动[]舞蹈[]...

单选按钮数据在从数据库中获取数据时未在浏览器上检查

当我从 mysql 数据库中获取数据时更新记录时，单选按钮没有被选中，有没有办法做到这一点我尝试了不同的方法但无法做到。 下面是...

如何让单选按钮的值在点击时立即显示？

选择字体： <h3>Choose a Font:</h3> <input type="radio" name="font" id="font_Georgia" value="Georgia" onclick="setFont(this.value)" /> Georgia 2609</label ><br /> <input type="radio" name="font" id="font_TNR" value="Times New Roman" onclick="setFont(this.value)" /> Times New Roman 2609</label ><br /> <input type="radio" name="font" id="font_Arial" value="Arial" onclick="setFont(this.value)" /> <label for="font_Arial" class="Arial">Arial 2609</label><br /> <input type="radio" name="font" id="font_arialBlack" value="Arial Black" onclick="setFont(this.value)" /> <label for="font_arialBlack" class="arialBlack" >Arial Black 2609</label ><br /> <input type="radio" name="font" id="font_Cursive" value="Cursive" onclick="setFont(this.value)" /> <label for="font_Cursive" class="cursive">Cursive 2609</label ><br /> <button id="nextToBg" class="formBtn">Next</button> </div> 这是单击时单选按钮的代码，我希望它更改显示文本的字体。无法弄清楚寻找正确方向的任何指示 我试过创建一个函数，添加一个事件监听器无法让它正常工作。

无法正确对齐输入文本与单选按钮

HTML 你会推荐这个网站吗？ HTML <fieldset> <label id="radio-buttons">Would you recommand this website? <input type="radio" name="radio" value="button" class="inline" checked>Yes</input> <input type="radio" name="radio" value="button" class="inline">No</input> <input type="radio" name="radio" value="button" class="inline">Maybe</input> </label> </fieldset> CSS input{ margin: 5px 0 0 0; width: 100%; min-height: 1.3em; } .inline{ width: unset; margin: 0 0.5em 0 0; vertical-align: middle; } 我尝试将单选按钮与文本本身对齐，但按钮最终比文本高出几个像素，我尝试了所有我能在网上找到的东西，但没有任何效果。 这可能是由 <label> 或 <fieldset> 元素上的默认填充或边距引起的。 尝试在您的 CSS 中为这些元素将 padding 和 margin 设置为 0，看看是否有帮助。 label, fieldset { padding: 0; margin: 0; } 如果没有，您可以尝试调整 .inline 类的 line-height 属性，直到文本和单选按钮按照您想要的方式对齐。 例如： .inline { line-height: 1.3em; /* rest of CSS */ } min-height 偏移你的对齐方式。你可以放下它，一切都很好。 你也可以摆脱垂直对齐。 在那种情况下，你需要重新做整个事情。这是一个快速修复。这里有更多关于如何在未来正确设置它的信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset p { margin: 0; /* optional, for the sake of SO editing */ } <fieldset> <p>Would you recommand this website?</p> <input type="radio" name="radio" value="button" id="yes" checked> <label for="yes">Yes</label><br> <input type="radio" name="radio" value="button" id="no"> <label for="no">No</label><br> <input type="radio" name="radio" value="button" id="maybe"> <label for="maybe">Maybe</label><br> </fieldset> <Label> 和 <input> 这样不行。 这种方式点击Yes，No或Maybe将影响他们各自的单选框。 fieldset { width : fit-content; min-width : 20em; } label { display : inline-block; margin : .3em 2rem 0 0; } <fieldset> <legend> Would you recommand this website? </legend> <label> <input type="radio" name="radio" value="Yes" checked > Yes </label> <label> <input type="radio" name="radio" value="No" > No </label> <label> <input type="radio" name="radio" value="Maybe" > Maybe </label> </fieldset>

How to show/hide Input fields based on radiobutton/checkbox selection in sap ui5?

所以我正在做一个表格，我需要显示，如果选择了单选按钮，可以说两个输入。如果未选中，则什么也不会发生，用户将看不到这些输入。他们应该是

如何让单选按钮在表单上被选中？

我的单选按钮在单击时没有被选中，并且在浏览器的检查元素上没有发现错误。可能是什么问题呢？因为我使用了正确的名称并绑定了它们...

.NET Maui 单选按钮文本在黑暗模式下不可见？

还有其他人注意到 RadioButton 内容（至少在 iOS 上）忽略了 TextColor 属性吗？在深色模式下，无论我将其设置为什么，它都会将内容显示为白色文本。 还有人注意到 RadioButton Content（至少在 iOS 上）忽略了 TextColor 属性吗？在黑暗模式下，无论我将其设置为什么，它都会将内容显示为白色文本。 <RadioButton Content="Black Content Text" TextColor="{AppThemeBinding Light=Black, Dark=Black}" /> 这是毛伊岛的已知虫子吗？

C#虽然radiobuton checked=false，但是当我运行它的时候，它是勾选的

我正在尝试用 C# 制作简单的赛车游戏。我有 4 个单选按钮，它们的 checked 属性是错误的。当我查看我的代码时，我尝试了类似 radioButton1.checked=true 的东西但是当我运行 pr...

反应单选按钮和状态未按预期执行

我知道很多类似的问题已经被问过和回答过，但是我有一个 React 组件，它的单选按钮没有按预期执行...... const availableClasses = { 农民：{ 南...

Android：将单选组内的单选按钮对齐到水平中心

我有一个包含单选组的项目，它有 2 个水平方向的单选按钮。 这是 XML： 我有一个由 Radio Group 组成的项目，它有 2 个水平方向的单选按钮。 这是 XML： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/ll_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/bg_border" android:orientation="horizontal"> <RadioGroup android:id="@+id/rg_answer_truefalse" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.5" android:padding="0dp" android:layout_gravity="center" android:gravity="center" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_answer_true" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.25" android:background="@drawable/bg_border" /> <RadioButton android:id="@+id/rb_answer_false" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.25" android:background="@drawable/bg_border" /> </RadioGroup> </LinearLayout> 问题是如何让每个单选按钮水平居中？我试过使用 layout_gravity 或 gravity 作为中心或 center_horizontal 但它似乎不起作用。谢谢 这是工作解决方案。不完美但有效。 <RadioGroup android:id="@+id/rg_answer_truefalse" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal" android:weightSum="5"> <View android:layout_height="1dp" android:layout_weight="1" android:layout_width="0dp" /> <RadioButton android:id="@+id/rb_answer_true" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" /> <View android:layout_height="1dp" android:layout_weight="1" android:layout_width="0dp" /> <RadioButton android:id="@+id/rb_answer_false" android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="0dp" /> <View android:layout_height="1dp" android:layout_weight="1" android:layout_width="0dp" /> </RadioGroup>

从JSON数据渲染DataTables，如何在表上预选单选按钮？

我在我的数据集上渲染文本框和单选按钮。我能够在我的文本框内填充数据。但我如何根据JSON数据的值来选择单选按钮？$...