Question

我正在尝试创建一个用于触摸屏设备的简单交互式表单。该表格的大部分由5个一组（大约37组）的单选按钮组成。我为每个单选按钮都有一个标签标签，当选中（单击）时，标签的background-color属性会在每个标签OnClick="this.style.background='#5555ff';"

中使用此JavaScript更改为突出显示的颜色

我想要添加到上面的内容，是一个JavaScript，如果在组内更改选择，将删除上述内容。例如。用户在组1中选择单选按钮A，然后将其选择更改为组1中的单选按钮B.此时，两个标签背景将更改为定义的颜色。

HTML表单由PHP动态创建，因此单选按钮名称，ID和＆amp;价值会有所不同。

我自己尝试完成此任务并未成功，并且似乎也没有简单的OnUnClick="xxx"。我在这里搜索了一个解决方案，但没有问题与我的相符，虽然我已经尝试调整现有解决方案以解决类似问题，但无济于事。

感谢您阅读！

Answer 1

假设你的单选按钮被分组为这样的div -

<div class="radio-group">
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR>
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR>
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P>
</div>

你可以在jquery中做这样的事情 -

$('input[type="radio"]').click(function(){
    var parentElement = $(this).parent();
    parentElement.find('input').css('background', '#000000'); //set to your neutral background for radio buttons
    $(this).css('background', '5555ff');
});

Answer 2

你走了：

<强> HTML

<html>
    <body>
        <div>
        <input type="radio" id="g1v1" name="g1" value="v1" checked="checked"/> <label for="g1v1">V1</label>
        </div>
        <div>
        <input type="radio" id="g1v2" name="g1" value="v2" /> <label for="g1v2">V2</label>
        </div>
        <div>
        <input type="radio" id="g1v3" name="g1" value="v3" /> <label for="g1v3">V3</label>
        </div>
        <div>
        <input type="radio" id="g1v4" name="g1" value="v4" /> <label for="g1v4">V4</label>
        </div>
    </body>
</html>

<强>的Javascript

$(document).ready(function(){
    var selectedRadioColor = "yellow";
    var normalRadioColor = "gray";
    // For changing color while document loads
    $.each($(":radio"), function(){
        //alert( $(this).prop("id")+ $(this).prop("checked") );
        if($(this).prop("checked") == false)
        {
            $(this).parent().css("color", normalRadioColor);
        }
        else
        {
            $(this).parent().css("color", selectedRadioColor );
        }
    })
    // For updating color when user interacts with radio buttons
    $(":radio").click(function(){
        $("[name='"+$(this).prop("name")+"']").parent().css("color", normalRadioColor);
        $(this).parent().css("color", selectedRadioColor );

    })
})

这是jsfiddle现场演示的链接： http://jsfiddle.net/dharmavir/6UnDs/

JavaScript：取消选择时设置单选按钮的背景（单选按钮组）

2 个答案: