Question

我有多个单选按钮。在我拥有的代码中，它们是与不同功能相对应的不同图片。

用户必须知道单击了哪个单选按钮。因此，我试图找到一种方法来单击单选按钮后更改单选按钮的背景。为了使代码有效，<label>必须保持<input>标记。

 <div class="radio-toolbar">

        <label class="BottomLeft">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
        </label>

        <label class="BottomRight">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
        </label>

        <label class="Dual">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
        </label>

        <label class="DualRight">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
        </label>

        <label class="Duplex">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
        </label>

        <label class="Custom">
            <input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
        </label>
    </div>

这是JSfiddle

Answer 1

你可以试试这个：

$('input[type=radio]')
    .on('click', function() {
        var $label = $(this).closest('label');
        $('label').not($label).css('background-color', 'green');
        $label.css('background-color', '#2C8BDE');
});

这是FIDDLE。

此外，您必须在html中拥有唯一的ID。

Answer 2

要处理标签，您的代码应如下所示。问题是，您不能为所有元素使用相同的ID。 ID是唯一的，如果您想使用标签，则必须在<label></label>元素中添加<label></label>属性。所以，请记住for=""符合for=""属性，并且<input />属性与name=""标记中的ID一起使用。我已将您的单选按钮设置为非多个，因此请删除<div class="radio-toolbar"> <label for="first"> Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" /> </label> <label for="second"> AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" /> </label> <label for="third"> Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" /> </label> <label for="fourth"> Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" /> </label> <label for="fifth"> Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" /> </label> <label for="sixth"> Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" /> </label> </div>属性以使其成为多个。

server.get('/echo', function (req, res, next) 
{
}

Answer 3

尝试this。我已将backgorund颜色选中的单选按钮更改为橙色并带有jquery

create procedure spSearch @fName varchar(25) = null, @lName varchar(25) = null
as
declare @condition varchar(512)
set @condition = '1=1'
if(not @fName is null)
    set @condition = @condition + ' and FirstName like ''' + @fName + '%'''
if(not @lName is null)
    set @condition = @condition + ' and LastName like ''' + @lName + '%'''
exec('select FirstName,LastName,DOB,SSN,School from dbo.TblClients where ' + @condition)
GO

点击单选按钮标签

3 个答案: