radio-button 相关问题

单选按钮是表单中使用的元素。它们让用户只选择有限数量的选项中的一个。

CSS radio:checked doesn't work for changing background image

我做错了什么? 每个单选按钮都有不同的背景图像。 当我悬停它时它会改变背景但是当它被选中时它会返回灰色并且不保留背景 变了。 好吧,我试过了

回答 1 投票 0

python tkinter 从选定的单选按钮获取文本值

我有一个单选按钮,供用户选择。在每次选择时,它都会为 Entry 小部件提供一些文本。 现在,我想从选中的单选按钮中获取文本值。我记得复选框 h...

回答 0 投票 0

Godot 4:通过代码生成单选按钮数组并将它们链接到自定义信号

尝试让单选按钮按下操作导致按钮的编号被打印到控制台。当前代码只打印“Button #_of_highest_button was pressed”,不管 ...

回答 2 投票 0

如何在每个问题的单选按钮中只选择一个选项

在这里输入图片描述 我的代码: @foreach($问题$问题) {{ $question->title }} * @foreach($question->question_detail_list as $question_detail) <...

回答 1 投票 0

mvc。净核心单选按钮为每个和模型活页夹选择值

我有 4 个单选按钮,我想为每个单选按钮选择值并将它们绑定到模型绑定器,以便每个属性的值要么为 true 要么为 false。此刻,我们需要收音机

回答 1 投票 0

在 React js 中第一次单击时单选按钮未选择值

我创建了一个自定义单选按钮组件,我正在导入它并将其映射到一个数组。 如果我点击单选按钮,它不会在第一次点击时选择值,但在第二次点击后它会...

回答 1 投票 0

在 WooCommerce 结账时选择特定文本输入的单选按钮

我正在通过我的子主题的 functions.php 将自定义字段添加到我在 WooCommerce 中的结帐区域。我添加了一些文本输入,但我需要添加两个单选按钮来选择/激活两个

回答 1 投票 0

ExcelUserForm with OptionButtons in a Frame - 用于识别和使用所选 OptionButton 的 NUMBER 的代码

`Private Sub CommandButton1_Click() '我有一个包含 2 个框架和 2 个命令按钮的用户窗体。 '2 个框架各有 30 个选项按钮; ' Frame1 有 OptionButtons 1 到 30 和 ...

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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>

回答 1 投票 0

在 Angular 10 中制作单选按钮

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

回答 1 投票 0

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

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

回答 1 投票 0

带有原始 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所需的值。

回答 7 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 0 投票 0

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

选择字体: <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> 这是单击时单选按钮的代码,我希望它更改显示文本的字体。无法弄清楚寻找正确方向的任何指示 我试过创建一个函数,添加一个事件监听器无法让它正常工作。

回答 0 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.