标签: radio-button

有没有办法让复选框像单选按钮一样？我假设这可以用jQuery完成？

<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />

<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />

如果选中了一个框,则该组中的其他框将取消选中.

我正在尝试使用Jquery验证插件来验证我的表单.我的大多数输入元素都出现了错误消息,但单选按钮只给我带来麻烦.

如果我没有为div.group类提供宽度,则错误消息出现在整页的外部(因为我假设div宽度是页面的100%？)没有做任何事情会导致出现错误消息在第一个单选按钮而不是第二个.我不能硬编码宽度,因为我想在几个宽度的无线电组上使用它.如何让它出现在单选按钮中的单选按钮结束的任何位置的右边缘？

谢谢!

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

然后

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

也许只是在组中的最后一个单选按钮后出现错误消息的方法？如果我能得到最后一个元素的句柄,我可以相应地改变偏移量.

编辑:啊哈,我刚刚使用了div.group {display:inline-block;}.

我有两个asp:RadioButton具有相同的控件,GroupName这基本上使它们互相排斥.

我的加价:

<asp:RadioButton ID="OneJobPerMonthRadio" runat="server" 
        CssClass="regtype"
        GroupName="RegistrationType"
        ToolTip="125"/>
<asp:RadioButton ID="TwoJobsPerMonthRadio" runat="server" 
        CssClass="regtype"
        GroupName="RegistrationType"
        ToolTip="200"/>

我的目的是找到被检查的RadioButton的工具提示/文本.我有这个代码隐藏:

int registrationTypeAmount = 0;
if (OneJobPerMonthRadio.Checked)
{
    registrationTypeAmount = Convert.ToInt32(OneJobPerMonthRadio.ToolTip);
}
if (TwoJobsPerMonthRadio.Checked)
{
    registrationTypeAmount = Convert.ToInt32(TwoJobsPerMonthRadio.ToolTip);
}

我发现代码丑陋且多余.(如果我有20个复选框怎么办？)

有没有一种方法可以RadioButton从一组RadioButtons获得相同的检查GroupName？如果没有,写一个的指针是什么？

PS:RadioButtonList在这种情况下我无法使用a .

在Google Chrome中,单选按钮会在圆圈周围显示不需要的白色背景.这并未按预期在Firefox中显示.

请检查这些图像.

而且她是有问题的页面的直接链接(在Firefox和Chrome中查看) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

我可以申请Chrome的任何CSS技巧吗？

要更改我使用的textView的字体

TextView tv = (TextView) findViewById(R.id.textview);
Typeface font = Typeface.createFromAsset(getAssets(), "SF_Cartoonist_Hand_Bold.ttf");
tv.setTypeface(font);

我想为单选按钮旁边的文本做类似的事情,我该怎么做呢？

我有一个带有一些radiobuttons的groupbox.我如何知道哪一个被检查？我正在使用WPF并跟随MVVM.

<GroupBox Name="grpbx_pagerange" Header="Print Range">
    <Grid >
        <RadioButton Name="radbtn_all" Content="All Pages" GroupName="radios_page_range" IsChecked="True"  />
        <RadioButton x:Name="radbtn_curr" Content="Current Page" GroupName="radios_page_range"  />
        <RadioButton Name="radbtn_pages" Content="Page Range" GroupName="radios_page_range" />

        ....

</GroupBox>

现在,我可以想出的一种方法是将每个RadioButton的IsCheckedProperty 绑定到ViewModel中的某个属性,然后在我的ViewModel中执行if..else类型的逻辑以找出所选的radiobutton.

但还有其他优雅的方式吗？

使用Ionic框架,我正在尝试创建一组三个按钮作为单选按钮:

如果我点击早餐,我希望午餐和晚餐回到正常(白色)状态,早餐变成蓝色.

使用我当前的代码,我无法使用此功能,虽然我可以让按钮切换颜色,稍微随机(也许我只是不理解ng-class指令).

这是我的HTML代码:

<div class="bar bar-subheader">
 <div class="button-bar">
   <a class="button" ng-class="{'button-positive' : !isActiveB, 'none': isActiveB}" ng-click="active('breakfast')">Breakfast</a>
   <a class="button" ng-class="{'button-positive' : !isActiveL, 'none': isActiveL}" ng-click="active('lunch')">Lunch</a>
   <a class="button" ng-class="{'button-positive' : !isActiveD, 'none': isActiveD}" ng-click="active('dinner')">Dinner</a>
 </div>
</div>

我的JS:

$scope.active = function(meal) {

 switch (meal) {
   case 'breakfast':
     $scope.$broadcast('slideBox.setSlide', 0);
     $scope.isActiveB = $scope.isActiveB;
     $scope.isActiveL = !$scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'lunch':
     $scope.$broadcast('slideBox.setSlide', 1);
     $scope.isActiveB = !$scope.isActiveB;
     $scope.isActiveL = $scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'dinner':
     $scope.$broadcast('slideBox.setSlide', 2);
     $scope.isActiveB …

是否可以设置所选单选按钮的中心圆,另外至少在webkit浏览器中...？

我现在拥有的:

我想要的是:

我可以按如下方式更改背景颜色,阴影等

#searchPopup input[type="radio"]{
  -webkit-appearance:none;
  box-shadow: inset 1px 1px 1px #000000;
  background:#fff;
}

#searchPopup input[type="radio"]:checked{
  -webkit-appearance:radio;
  box-shadow: none;
  background:rgb(252,252,252);
}

有任何想法吗..？

在我的HTML页面中,我有两组基于布尔的单选按钮:标签:"是"和"否"/值:分别为True和False.我正在填充PostgreSQL数据库表中的完整表单,以允许经过身份验证的用户查看带有填充数据的表单,并编辑包含单选按钮的填充字段,然后保存将数据保存到数据库的表单.所有其他文本字段填充没有问题; 这是收音机按钮的集合我有一个问题,预先勾选单选按钮.

下面没有预先填充前端检查的内容(但添加了HTML源中已检查的正确属性):

    <input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

但是,这会在加载时检查正确的单选按钮:

    <input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />

注意:我需要检查指令ng-checked中的字符串boolean值,因为boolean值总是以PostgreSQL中的字符串形式返回.显然,当从具有布尔数据类型的列查询数据时,这是PostgreSQL设计的一部分.

添加ng-model指令时,不再选中单选按钮(至少在渲染的浏览器视图中).奇怪的是我查看了源代码,它清楚地检查了正确的一个.更奇怪的是,我必须两次单击单选按钮才能"检查"它.我已经在最新版本的Chrome,FF和IE中对此进行了测试,这一切都导致了同样的问题.

问题是:在添加ng-model指令时,为什么HTML源会在单选按钮属性中添加"已检查",但似乎没有标记单选按钮？此外,为什么我必须在应该检查的单选按钮上单击两次？

解决方案: 为了解决这个问题,我从单选按钮中删除了ng-checked指令,并且只使用了@Cypher和@aet建议的ng-model.然后我用指令ng-value"true"和"false" 替换了属性值.之后,我在控制器中设置了值.

HTML

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Angular JS

app.controller('peopleCtrl', function($scope, peopleFactory){
    ... …

我有一个label" for="the pointer to the checkbox input"",只要我知道,这for只能添加label.因此,我需要在labela <button>(我需要它)内部添加,但click事件无法正常工作 - 它不会检查for指向的复选框.

什么是我可以用在这里,如果我必须把可能性<button>里面label,只用HTML + CSS编码？

一些代码例如:

<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>