radio-button 相关问题

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

我不知道为什么，但单选按钮组单独显示按钮/标签和单选按钮，与引导网站上的示例不同代码只是从引导程序复制粘贴的（...

html css twitter-bootstrap radio-button

回答 3 投票 0

我试图将 btn-check 类与 btn-sm 一起使用来获得更小的按钮，但它忽略了小类。我错过了什么或者有其他方法可以让按钮变小吗？我正在尝试使用 btn-check 类和 btn-sm 来获得更小的按钮，但它忽略了小类。我错过了什么还是有其他方法可以让按钮变小？ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="row g-2 mx-2 my-2"> <div class="btn-group col-6" role="group"> <input type="radio" class="btn-check btn-sm" name="option" id="option-1" value="yes"> <label class="btn btn-outline-success" for="option-1">Yes</label> <input type="radio" class="btn-check btn-sm" name="option" id="option-2" value="na"> <label class="btn btn-outline-secondary" for="option-2">I Don't Know</label> <input type="radio" class="btn-check btn-sm" name="option" id="option-3" value="no"> <label class="btn btn-outline-danger" for="option-3">No</label> </div> </div> 给你... 从 btn-sm 元素中删除 <input> 类。将 btn-sm 类添加到 <div class="btn-group col-6" role="group"> 和所有三个 <label> 元素。请参阅下面的片段。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="row g-2 mx-2 my-2"> <div class="btn-group col-6 btn-sm" role="group"> <input type="radio" class="btn-check" name="option" id="option-1" value="yes" /> <label class="btn btn-outline-success btn-sm" for="option-1">Yes</label> <input type="radio" class="btn-check" name="option" id="option-2" value="na" /> <label class="btn btn-outline-secondary btn-sm" for="option-2">I Don't Know</label> <input type="radio" class="btn-check" name="option" id="option-3" value="no" /> <label class="btn btn-outline-danger btn-sm" for="option-3">No</label> </div> </div> 您也可以将 div 中的 btn-group 类更改为 btn-group-sm。 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row g-2 mx-2 my-2"> <div class="btn-group-sm col-6" role="group"> <input type="radio" class="btn-check" name="option" id="option-1" value="yes" /> <label class="btn btn-outline-success" for="option-1">Yes</label> <input type="radio" class="btn-check" name="option" id="option-2" value="na" /> <label class="btn btn-outline-secondary" for="option-2">I Don't Know</label> <input type="radio" class="btn-check" name="option" id="option-3" value="no" /> <label class="btn btn-outline-danger" for="option-3">No</label> </div> </div>

radio-button bootstrap-5

回答 2 投票 0

Angular Material 单选按钮组需要验证不起作用

我试图在用户单击“提交”时验证单选按钮组。文本字段和下拉列表在无效时显示红色，但单选按钮颜色在无效时不会更改。有什么建议吗？...

angular validation radio-button angular-material2 required

回答 2 投票 0

如何设置选中单选输入的父标签的样式

我需要对一些无线电输入进行风格化。我从这里尝试了一些解决方案，但没有一个对我有用。有人可以看一下这段代码并告诉我我能做什么吗？这是 HTML：我需要对一些 radio 输入进行样式化。我从这里尝试了一些解决方案，但没有一个对我有用。有人可以看一下这段代码并告诉我我能做什么吗？这是 HTML： <div class="controls"> <table> <tbody> <tr> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="0">Berlina </label> </td> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="1">Break </label> </td> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="2">Cabrio </label> </td> </tr> </tbody> </table> </div> 还有 CSS： label.radio { background: #fcb608; } .radio input { display: none; } label.radio input[type="radio"]:checked + label { background: #000 !important; border: 1px solid green; padding: 2px 10px; } CSS没有达到预期的效果；你能帮我吗？这是JS的一些相关摘录： // If checkboxes or radio buttons, special treatment else if (jQ('input[name="'+parentname+'"]').is(':radio') || jQ('input[name="'+parentname+'[]"]').is(':checkbox')) { var find = false; var allVals = []; jQ("input:checked").each(function() { for(var i = 0; i < parentvalues.length; i++) { if (jQ(this).val() == parentvalues[i] && find == false) { jQ('#adminForm #f'+child).show(); jQ('#adminForm #row_'+child).show(); find = true; } } }); if (find == false) { jQ('#adminForm #f'+child).hide(); jQ('#adminForm #row_'+child).hide(); //cleanup child field if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) { jQ('#adminForm #f'+child).attr('checked', false); } else { if (cleanValue == true) { jQ('#adminForm #f'+child).val(''); } } } } else { var find = false; for(var i = 0; i < parentvalues.length; i++) { if (jQ('#adminForm #f'+parentname).val() == parentvalues[i] && find == false) { jQ('#adminForm #f'+child).show(); jQ('#adminForm #row_'+child).show(); find = true; } } if(find == false) { jQ('#adminForm #f'+child).hide(); jQ('#adminForm #row_'+child).hide(); // cleanup child field if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) { jQ('#adminForm #f'+child).attr('checked', false); } else { if (cleanValue == true) { jQ('#adminForm #f'+child).val(''); } } } } } function dependency(child,parentname,parentvalue) { var parentvalues = parentvalue.split(","); // if checkboxes jQ('input[name="'+parentname+'[]"]').change(function() { checkdependency(child,parentname,parentvalues,true); //if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#'+child).change(); }); // if buttons radio jQ('input[name="'+parentname+'"]').change(function() { checkdependency(child,parentname,parentvalues,true); // if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#'+child).change(); }); jQ('#f'+parentname).click(function() { checkdependency(child,parentname,parentvalues,true); // if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#f'+child).change(); }); checkdependency(child,parentname,parentvalues,false); } 一种可能性在我发帖时，我不太确定所需的布局应该是什么，但尝试的 CSS 中有一个具体问题需要解决。相邻兄弟选择器: ...分隔两个选择器，并且仅当第二个元素紧跟在第一个元素之后时才匹配第二个元素。如果 <input> 是 <label> 的子级，则它不相邻，因此 while: label.radio input[type="radio"]:checked + label 正在寻找紧随 label :checked 内的 input 中的 label，并且类为 .radio，不存在类似的情况。在这种情况下，要更改 label 的样式，需要一个影响父级的选择器，而目前不可能。因此，要选择 label :checked 中的 input，我们需要 label 相邻，而不是父级。我们可以使用 for="id" 属性: A <label> 可以通过将控制元素放置在 <label> 元素内或使用 for 属性与控件关联。正如我所说，我不太确定所需的布局应该是什么，但这里有一个使用 for 属性的示例，看起来还不错。 div { display: inline-block; position: relative; } label { background: #fcb608; padding: 2px 10px 2px 1.5em; border: 1px solid transparent; /* keeps layout from jumping */ } input { position: absolute; } input[type="radio"]:checked + label { background: #000; border-color: green; color: white; } <div> <input id="id1" type="radio" name="ad_caroserie" value="0"> <label for="id1" class="radio">Berlina</label> </div> <div> <input id="id2" type="radio" name="ad_caroserie" value="1"> <label for="id2" class="radio">Break</label> </div> <div> <input id="id3" type="radio" name="ad_caroserie" value="2"> <label for="id3" class="radio">Cabrio</label> </div> 与 <input> 作为 <label> 的孩子使用小型 JavaScript 处理程序监听更改到<form>。如果检测到 change，触发的函数会检查 <input type="radio"> 是否已更改，如果是，则检查其 <label> 是否为 parentElement。如果这是真的，它会检查是否存在同名的 <input type="radio">，它是具有 <label> class 的 .checked 元素的子元素。如果有，它会从 class 中删除 <label>，然后将相同的 class 应用于触发整个事件的 <label> <input> 的 target 父级。 let form = document.querySelector( "form" ); form.addEventListener( "change", ( evt ) => { let trg = evt.target, trg_par = trg.parentElement; if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) { let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' ); if ( prior ) { prior.parentElement.classList.remove( "checked" ); } trg_par.classList.add( "checked" ); } }, false ); label { background: #fcb608; padding: 2px 10px 2px 0; border: 1px solid transparent; /* keeps layout from jumping */ } label.checked { background: #000; border-color: green; color: white; } <form> <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label> <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label> <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label> </form> 如果没有 JavaScript，事情就会变得困难（根据我最初的解释，为什么在这种情况下最好使用 for 属性）。我们可以使用 appearance 属性（带有前缀和合理的支持）来有效隐藏用户代理 radio GUI，然后使用剩余的 faceless 元素构建一个 fake background 对于 <label>。这是非常老套的，并且比默认的动态性要差很多，因为需要一些absolute定位和特定尺寸才能实现它。它有点有效（在大多数浏览器中），但在站点范围内实施很棘手。不过有一些可以玩的东西:-) input { position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 5em; height: 1.5em; z-index: -1; background: #fcb608; border: 1px solid transparent; margin: -.1em -.8em; outline: 0; } label { display: inline-block; width: 5em; color: white; text-shadow: 1px 1px 0px black; } input[type="radio"]:checked { background: #000; border-color: green; } <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label> <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label> <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label> 只需将 jQuery 与新的 css 类“selected”一起使用，如下所示：开始时： $("input[name='ad_caroserie']:checked").parent().addClass("selected"); 和变化： $('input[type=radio][name=ad_caroserie]').change(function() { $("input[name='ad_caroserie']").parent().removeClass("selected"); $("input[name='ad_caroserie']:checked").parent().addClass("selected"); // console.log($("input[name='ad_caroserie']:checked").val()); }); 在尝试了很多次纯 HTML 和 CSS 之后。我正在用 JavaScript 解决这个简单的解决方案。我认为这会有所帮助。 function check(btn) { let label = btn.children; label[0].checked = true; } .lib-radio { color: #1e1e1e; font-size: 1.0em; border-radius: 31px; font-weight: 400; width: 450px; height: 40px; border: 2px solid black; padding: 0.5em; font-family: Lato; margin: 10px 0 0 0; } .lib-radio:hover { background-color: #000; color: #FFF; } <div class="lib-one-input"> <p class="lib-form-label">Select your gender</p> <div class="lib-radio" onclick="check(this)"> <input id="s1yes" type="radio" name="mcq1" value="male"> <label for="s1yes"> Yes, our researchers authored it</label><br /> </div> <div class="lib-radio" onclick="check(this)"> <input id="s1no" type="radio" name="mcq1" value="female"> <label for="s1no"> No, we didn&#39t author it </label><br /> </div> </div> <form id="button-form"> <fieldset id="button-set"> <label for="button-1"> <input type="radio" id="button-1" name="button-group"/> </label> <label for="button-2"> <input type="radio" id="button-2" name="button-group"/> </label> <label for="button-3"> <input type="radio" id="button-3" name="button-group"/> </label> </fieldset> </form> <style> #button-set label > * { opacity: 0;  } </style> <script> function setColor(color) { document.getElementsByName("button-group").forEach(node => { node.checked === true ? (node.parentElement.style.background = color) : (node.parentElement.style.background = "rgba(0, 0, 0, 0.5)"); }); } window.onload = () => { document.getElementById("button-form").onchange = evt => { switch (evt.target) { case document.getElementsById("button-1"): setColor("rgba(0, 150, 0, 0.5)"); break; case document.getElementsById("button-2"): setColor("rgba(250, 200, 0, 0.5)"); break; case document.getElementsById("button-3"): setColor("rgba(250, 0, 0, 0.5)"); break; } }; }; </script>

html css radio-button

回答 4 投票 0

如何更改.Net MAUI中ContentPresenter的文本颜色

我在我的应用程序中使用了自定义样式的单选按钮，它使用 ContentPresenter 来显示文本/内容。我想更改文本的颜色。我尝试过 TextColor 和 TextBlock。

c# xaml radio-button maui contentpresenter

回答 1 投票 0

单选按钮更改事件不会动态触发值更改

我有一个带有单选按钮的简单的 Angular Reactive 表单。当我使用 formControl 更改选定的单选按钮值时，更改事件不会触发。还有其他事件会触发...

angular radio-button angular-reactive-forms onchange syncfusion

回答 1 投票 0

可访问的是/否单选按钮，显示/隐藏相应的表单字段

我正在开发一个非常旧的网站，尝试更新它以便屏幕阅读器用户可以访问。特别是，我试图找出对一些单选按钮进行编码的最佳方法，其中是/否值

forms radio-button accessibility show-hide

回答 1 投票 0

Acrobat X Pro Javascript 如何让单选按钮导致计算字段添加另一个计算

我有几个格式化为数字的文本字段。每个文本字段都由一组单选按钮填充，从而可以选择数字。最终的文本字段设置为一个简单的“值我...

javascript radio-button acrobat

回答 0 投票 0

单选按钮只需要一个函数调用几个函数

所以，我正在制作一张地图，可以使用一种方法对每一层的数据进行分类。但是现在，我也希望用户能够根据自己的意愿选择方法。我想创建三个收音机

javascript html function radio-button choropleth

回答 0 投票 0

自定义复选框（单选）在缩放时不居中

我正在为 chrome 浏览器写一个扩展。将带有两个自定义复选框和标签的块添加到我需要的页面。问题是在缩放页面的时候，ra的内部选择...

css checkbox google-chrome-extension radio-button zooming

回答 0 投票 0

如何使用 JQuery 检查单选按钮？

我在一组中有两个单选按钮，我想使用 JQuery 检查单选按钮是否被选中，如何？

javascript jquery radio-button

回答 10 投票 0

仅在几个单选按钮中的一个上动态写入“选中”属性

减少或简化以下检查适用输入字段的php函数的好方法是什么？减少或简化以下检查适用输入字段的 php 函数的好方法是什么？ <?php $options = get_option( 'navbar_style', '' ); $right = $left = $fade = ''; if( isset( $options['style'] ) ) { if( $options['style'] == 'right' ) { $right = ' checked="checked"'; } if( $options['style'] == 'left' ) { $left = ' checked="checked"'; } if( $options['style'] == 'fade' ) { $fade = ' checked="checked"'; } } ?> <label><input type='radio' name='navbar_style[style]' value='right' <?php echo $right; ?> >Right <em>(Default)</em></label> <label><input type='radio' name='navbar_style[style]' value='left' <?php echo $left; ?> >Left</label> <label><input type='radio' name='navbar_style[style]' value='fade' <?php echo $fade; ?> >Fade</label> 可以使用动态变量设置，但是不推荐！请参阅下一个示例以正确使用。 $options['style'] = 'left'; $right = $left = $fade = ''; if (in_array($options['style'] ?? '', ['right', 'left', 'fade'])) { ${$options['style']} = ' checked="checked"'; } var_dump($right, $left, $fade); string(0) "" string(18) " checked="checked"" string(0) "" 一个更简洁的方法是这个版本并使用例如$checks['left']而不是$left. $checks = []; foreach (['right', 'left', 'checked'] as $check) { $checks[$check] = $options['style'] === $check ? ' checked="checked"' : ''; } var_dump($checks); array(3) { 'right' => string(0) "" 'left' => string(18) " checked="checked"" 'checked' => string(0) "" } 创建一个函数并传入选项可能更紧凑，那么它只是一个测试，看看是否设置了该选项并返回相应的 html ... function styleCheck($option, $options) { return ($options['style'] ?? '') == $option ? ' checked="checked"' : ''; } ?> <label><input type='radio' name='navbar_style[style]' value='right'<?php echo styleCheck('right', $options); ?>>Right <em>(Default)</em></label> <label><input type='radio' name='navbar_style[style]' value='left'<?php echo styleCheck('left', $options); ?>>Left</label> <label><input type='radio' name='navbar_style[style]' value='fade'<?php echo styleCheck('fade', $options); ?>>Fade</label> 你也可以这样做： $style = ['right' => '', 'left' => '', 'fade' => '']; if (isset($options['style']) && array_key_exists($options['style'], $style)) { $style[$options['style']] = ' checked="checked"'; } 你可以试试这个： $options = get_option( 'navbar_style', '' ); $styles = array('right', 'left', 'fade'); $checked = array_fill_keys($styles, ''); if(isset($options['style']) && in_array($options['style'], $styles)) { $checked[$options['style']] = 'checked="checked"'; } 作为一名程序员，您应该留意代码中的重复模式。显然，有重复的 HTML 标记，文本调整最少。首字母缩略词 D.R.Y 的意思是“不要重复自己”。创建一个包含这些动态数据点的数组，然后实现一个循环来生成所需的标记。这将有助于防止拼写错误并使您的脚本更易于维护。代码：（演示） $options = ['style' => 'left']; $radios = [ 'right' => 'Right <em>(Default)</em>', 'left' => 'Left', 'fade' => 'Fade', ]; foreach ($radios as $value => $text) { printf( "<label><input type='radio' name='navbar_style[style]' value='%s'%s>%s</label>\n", $value, ($options['style'] ?? '') === $value ? ' checked' : '', $text ); }

php if-statement radio-button wordpress-theming checked

回答 5 投票 0

ionic离子收音机在选择时改变颜色

如何在用户选择单选按钮时更改 Ionic 中单选按钮的颜色。我想更改整个列表或区域，而不是无线电图标。

ionic-framework radio-button

回答 0 投票 0

使用 CSS 勾选单选按钮和复选框的样式 [重复]

我正在尝试使用 CSS 设置选中的单选按钮和复选框的样式。 .radiocheck:checked~.square { 背景：绿色； } 我正在尝试使用 CSS 设置选中的单选按钮和复选框的样式。 .radiocheck:checked~.square { background: green; } <label class="square"> <input type="radio" class="radiocheck" name="test"/> <span>Radio number one</span> </label> </br> <label class="square"> <input type="radio" lass="radiocheck" name="test"/> <span>Radio number two</span> </label> 如果选中收音机，我希望收音机周围的背景和标签为绿色。

css radio-button

回答 0 投票 0

以编程方式更改卡片视图可点击属性

如何在运行时将卡片视图的可点击属性从真更改为假

android radio-button android-cardview clickable

回答 0 投票 0

选择两个不同的单选组时显示一个 div

我试图在选择两个不同的单选按钮时显示隐藏的 div；单选按钮在不同的组中并具有不同的 ID。所以用户将选择一个特定的单选按钮......

javascript html jquery radio-button

回答 2 投票 0

如何用循环简化它？

我想用一个循环来简化这个。每个块中唯一发生变化的是_1、_2、_3（等）。基本上，我想听一堆（独特的）2 选项收音机来改变......