标签: radio-button

我需要在我的表单中有多个单选按钮组,如下所示:

我知道只需为每个组指定相同的" name "html属性即可.
但是,
当使用html helper时,MVC不允许您指定自己的name属性:

@Html.RadioButtonFor(i => item.id, item.SelectedID, new { Name = item.OptServiceCatId })  

因为它查看每个标签的" 名称 "属性(而非" id ")以将表单映射/绑定到控制器接收的模型等.

有人说,指定每个具有相同"GroupName"属性将解决问题,但它也不起作用.

那么,有什么办法可行吗？

编辑:
这是我的观点(简化):

@model Service_Provider.ViewModels.SelectOptServicesForSubServiceViewModel

@foreach (var cat in Model.OptServices)
{
  //A piece of code & html here
  @foreach (var item in cat.OptItems.Where(i => i.MultiSelect == false))
  {
     @Html.RadioButtonFor(i => item.id, item.SelectedID, new { GroupName = item.OptServiceCatId })
<br />
  }    
}

注意:
我的模型是List<OptServices>:

public List<OptServices> Cats {get; set;}

和OptServices拥有List的OptItems内部: …

我有一个模板控件(转发器)列出了一些文本和其他标记.每个项目都有一个与之关联的单选按钮,使用户可以选择由转发器创建的项目之一.

转发器将radiobutton设置为使用默认ASP.NET命名约定生成的id和名称,使每个radiobutton成为一个完整的"组".这意味着所有的无线电按钮彼此独立,遗憾的是,这意味着我可以同时选择所有的无线电按钮.radiobutton具有用于设置公共名称的聪明属性"groupname",因此它们被组合在一起,因此应该是相关的(因此我一次只能选择一个).问题是 - 这不起作用 - 转发器确保id和名称(控制分组)不同.

由于我使用转发器(可能是listview或任何其他模板化的数据绑定控件),我无法使用RadioButtonList.那么这让我离开了什么地方？

我知道我以前遇到过这个问题并解决了.我知道几乎每个ASP.NET程序员都必须拥有它,所以为什么我不能google并找到解决问题的可靠方法呢？我遇到了通过JavaScript强制执行分组的解决方案(丑陋!)甚至将无线电按钮作为非服务器控件处理,迫使我做一个Request.Form[name]读取状态.我也试过尝试覆盖PreRender事件上的name属性- 不幸的是,拥有的页面和母版页再次覆盖了这个名称以反映完整的id/name,所以我最终得到了相同的错误结果.

如果你没有比我发布的更好的解决方案,你仍然非常欢迎你发表你的想法 - 至少我会知道我的朋友'杰克'是关于ASP.NET有时搞砸了;)

有没有办法用CSS制作一个更大的单选按钮？

如果没有,我还能怎么办？

看完jQuery文档后我遇到了麻烦.我只是试图在我的jquery方法中返回true/false,具体取决于对某个radiobutton的检查以及是否选中

我已经尝试了几件事,但未能做到这一点:

<input type="radio" runat="server" name="testGroup" id="test1" /><label for="<%=test1.ClientID %>" style="cursor:hand" runat="server">Test1</label>
<input type="radio" runat="server" name="testGroup" id="test2" /><label for="<%=test2.ClientID %>" style="cursor:hand" runat="server">Test2</label>
<input type="radio" runat="server" name="testGroup" id="test3" /> <label for="<%=test3.ClientID %>" style="cursor:hand">Test3</label>

在我的方法中我有这个:

return $("input[@name='test2']:checked");

我得到一个未定义的 $("input[@name='test2']:checked");

更新:

例:

<input type="radio" runat="server" name="radioGroup"  id="payPalRadioButton" value="paypalSelected" /> 

这仍然会返回'undefined':

$("input[@name=radioGroup]:checked").attr('payPalRadioButton'); 

如果我试试这个,即使我选择了单选按钮,我也会"假":

$('input:radio[name=radioGroup]:checked').val() == 'paypalSelected'

我有一些单选按钮,我想根据选择的单选按钮显示不同的隐藏div.这是HTML的样子:

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div>  
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div>  
    <input type="submit" value="Submit">
</form>

....

<style type="text/css">
    .desc { display: none; }
</style>

....

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
<div id="opt3" class="desc">sed do eiusmod tempor</div>

这是我的jQuery:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("#"+test).show();
    }); 
});

我这样做的原因是因为我的单选按钮和div是动态生成的(单选按钮的值总是有一个相应的div).上面的代码部分工作 - div会在选中正确的按钮时显示,但我需要添加一些代码,以便在取消选中按钮后再次隐藏div.谢谢!

在使用这样的代码(EditorTemplates/UserType.ascx)时,默认的ASP.NET MVC2 Html助手似乎会生成重复的HTML ID:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<UserType>" %>

<%: Html.RadioButton("", UserType.Primary, Model == UserType.Primary) %>
<%: Html.RadioButton("", UserType.Standard, Model == UserType.Standard) %>
<%: Html.RadioButton("", UserType.ReadOnly, Model == UserType.ReadOnly) %>

它产生的HTML是:

<input checked="checked" id="UserType" name="UserType" type="radio" value="Primary" /> 
<input id="UserType" name="UserType" type="radio" value="Standard" /> 
<input id="UserType" name="UserType" type="radio" value="ReadOnly" /> 

这清楚地表明了一个问题.所以我一定是在滥用助手等等.

我可以手动指定id为html属性,但我无法保证它将是唯一的.

所以问题是如何确保RadioButton助手生成的ID对于每个值都是唯一的,并且仍然保留用于生成这些ID 的约定(因此嵌套模型是否受到尊重？(最好不要手动生成ID.)

我正在尝试创建一些单选按钮,我不知道如何.按照这个问题我已经设置了几乎正确的工作,但我是新手,不知道为什么我不能完全搞清楚.所以我正在做的是放置一个标签来对布尔值进行分组,然后设置标有"是"和"否"的单选按钮.如果用户单击"是"标签,则应选择单选按钮是(现在他们只能单击按钮)本身).这是我的代码如下:

  <div class="field">
    <%= f.label :autolyse %><br />
    <%= f.label :autolyse, "Yes", :value => "Yes"  %>
    <%= f.radio_button :autolyse, true%>
    <%= f.label :autolyse, "No", :value => "No" %>
    <%= f.radio_button :autolyse, false, :checked => true %>
  </div>

第一个标签用于组,它标记组"Autolyse".然后我想要一个标签为"是",如果选择将设置为真,然后显然下一个为假.如何正确设置？

我在这里广泛搜索了一个答案,但还没有找到我正在寻找的东西.找到这个CSS - 如何设置所选单选按钮标签的样式？但答案涉及更改标记,这是我想要避免的内容,我将在下面解释.

我正在尝试为我的XenForo论坛主题添加自定义css3复选框和单选按钮,我读过的所有教程在输入后都有标签:

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

但是在XenForo的标记中,输入位于标签内:

<label for="ctrl_enable_rte">
<input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} />
{xen:phrase use_rich_text_editor_to_create_and_edit_messages}
</label>

我查看了为什么会这样,但是当标记是这样时,没有找到任何与自定义css复选框/单选按钮相关的内容.我想避免不得不改变标记,因为我在这里处理一个论坛系统,这将涉及编辑一堆核心模板......我必须在每次论坛软件时更新标记推出更新(假设模板已更改).

我已经尝试创建可以使用这种类型标记的CSS规则,但到目前为止我还没有成功.我对CSS没有太多经验,没有记住每一个选择器,伪类对我来说仍然很陌生,所以我希望这里有人能说明这是否可行,如果可行的话,我怎么样可能会去做.我已经准备好了我的精灵,我只需要弄清楚CSS了.

我的主要问题是我无法弄清楚如何选择标签(当然只有与这些输入有关的标签).通常是这样的

input[type="checkbox"] + label

使用,但当标签不是在输入之后而是在它之外/之前...如何选择它？

显示一组JRadioButtons时,最初没有选择它们(除非您以编程方式强制执行).即使在用户已选择按钮之后,我也希望能够将按钮重新置于该状态,即,不应选择任何按钮.

但是,使用通常的嫌疑人无法提供所需的效果:在每个按钮上调用'setSelected(false)'不起作用.有趣的是,当按钮没有放入ButtonGroup时它确实有效 - 不幸的是,后者是JRadioButtons互斥的必需品.

此外,使用setSelected(ButtonModel,boolean) - javax.swing.ButtonGroup的方法不能做我想要的.

我已经整理了一个小程序来演示效果:两个单选按钮和一个JButton.单击JButton应取消选择单选按钮,以使窗口看起来与第一次弹出时完全一样.

import java.awt.Container;
import java.awt.GridLayout;
import java.awt.event.*;
import javax.swing.*;

/**
 * This class creates two radio buttons and a JButton. Initially, none
 * of the radio buttons is selected. Clicking on the JButton should
 * always return the radio buttons into that initial state, i.e.,
 * should disable both radio buttons.
 */
public class RadioTest implements ActionListener {
    /* create two radio buttons and a group */
    private JRadioButton button1 = …

请参阅下面的表单HTML代码

<form method="post" action="register">      
    <div class="email">
        Email   <input type="text" tabindex="1" id="email" value="" name="email">                   </div>
    </div>
    <div class="agreement">
        <div tabindex="2" class="terms_radio">
            <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
                <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
            </div>
        </div> 
    </div>
    <div class="form_submit">
        <input type="button" tabindex="3" value="Cancel" name="cancel">
        <input type="submit" tabindex="4" value="Submit" name="submit">         
    </div>
</form>

在这里,我设置了协议复选框,使得无线电输入完全隐藏,并且背景图像应用于包装器div,并且包装div的onclick将切换背景图像以及无线电输入的检查状态.

我需要在'terms_radio'DIV上设置tabindex索引,只是tab上的tabindex ="2"属性不起作用,

当光标位于电子邮件输入字段时,是否可以在按TAB时将无线电输入标签上的虚线边框带上？