标签: radio-button

有没有办法控制CSS中单选按钮的大小？

我正在使用PHP创建一个测验Web应用程序.每个问题由一个单独的<label>,由4个可能的选项组成,radio buttons用于允许用户选择他/她的答案.单个问题的当前HTML如下所示:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

我希望用户可以选择单击与单选按钮关联的文本. 现在,用户只能点击单选按钮本身 - 我发现这是一项非常繁琐的任务.

我读了无法通过点击选择的文本选择特定的单选按钮,选择和向***建议分for和id标签匹配的属性.我做了这个,它仍然无法正常工作.

我的问题是:我希望能够单击<input type="radio">对象的文本,而不是只能选择单选按钮本身. 我知道我以前读过这个,但似乎无法找到解决问题的方法.任何帮助或建议都非常感谢!

正确对齐单选按钮/复选框与文本的最简洁方法是什么？到目前为止我唯一可靠的解决方案是基于表格:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

有些人可能会对此不屑一顾.我花了一些时间(再次)调查一个无表格的解决方案,但失败了.我尝试了浮动,绝对/相对定位和类似方法的各种组合.不仅如此,他们主要依赖于单选按钮/复选框的估计高度,但它们在不同浏览器中的表现也不同.理想情况下,我想找到一个解决方案,它不会假设大小或特殊的浏览器怪癖.我很喜欢使用表格,但我想知道还有其他解决方案.

我正在使用ReactiveFormsModuleAngular2来创建包含表单的组件.这是我的代码:

foo.component.ts:

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html(with [formControl]):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html(with formControlName):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" …

是否可以在仍然使用Android的内置组件的同时在RadioButton和标签之间添加一点空间？默认情况下,文本看起来有点紧张.

<RadioButton android:id="@+id/rb1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="My Text"/>

我尝试了几件事:

1. 指定边距和填充似乎在整个元素周围添加空间(按钮和文本,一起).这是有道理的,但不能做我需要的.

2. 通过XML创建自定义drawable,为已检查和未检查的状态指定图像,然后在每个图像的右侧添加一些额外的像素.这应该可行,但现在您已经超出默认UI.(不是世界末日,但不是理想的)

3. 在每个标签的开头添加额外的空格.Android似乎修剪了一个领先的空格字符,如"我的字符串",但是指定unicode U + 00A0,就像"\ u00A0My String"一样.这有效,但似乎有点脏.

更好的解决方案？

出于某种原因,我似乎无法弄清楚这一点.

我的html中有一些单选按钮可以切换类别:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

用户可以选择他/她想要的任何一个,但是当某个事件触发时,我想设置1234为设置选中的单选按钮,因为这是默认选中的单选按钮.

我尝试了这个版本(有和没有jQuery):

document.getElementById('#_1234').checked = true;

但它似乎没有更新.我需要它明显更新,以便用户可以看到它.有人可以帮忙吗？

编辑:我只是累了,忽略了#,谢谢你指出,那和$.prop().

我想用名字来获得无线电组的价值managerelradio.这个广播组的html代码是.

 <label><input type="radio" name="managerelradio" value="Yes" id="Add">Add</label>
 <label><input type="radio" name="managerelradio" value="No" id="Remove">Remove</label>

和Jquery这个是..

    var manageradiorel = $('input[name = "managerelradio"]:checked' , '#managechildform').val();
 alert(manageradiorel);

它显示我未定义.

虽然我也尝试过.

 var manageradiorel = $('input[name = "managerelradio"]:checked').val();
 alert(manageradiorel);

但我仍然得到未定义的价值.

我想要一组单选按钮看起来像一组切换按钮(但仍然像单选按钮一样工作).它们看起来不像切换按钮.

我怎么能用CSS和HTML做到这一点？

编辑:当选中/取消选中按钮时,我会满意地让小圆圈消失并改变样式.

我正在开发一个允许进行调查的应用程序.我的布局是基于XML的问题生成的.

我需要创建单选按钮(单选)和复选框(多个答案).我找不到任何对swift有用的东西.

有没有人有想法？

我正在尝试使用下面给出的jQuery语法获取两个单选按钮组的值.当运行以下代码时,我从第一个单选按钮组中选择两次,而不是获取每个组的值.

我在做一些明显不对的事吗？谢谢你的帮助 :)

<a href='#' id='check_var'>Check values</a><br/><br/>
<script>
  $('a#check_var').click(function() {
    alert($("input:radio['name=r']:checked").val()+ ' ' +
          $("input:radio['name=s']:checked").val());
  });
</script>
Group 1<br/>
<input type="radio"  name="r" value="radio1"/> radio1
<input type="radio"  name="r" value="radio2"/> radio2
<br/><br/>
Group 2<br/>
<input type="radio"  name="s" value="radio3"/> radio3
<input type="radio"  name="s" value="radio4"/> radio4