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

Question

I am trying to create a simple interactive form for use with touch screen devices. 我正在尝试创建一个用于触摸屏设备的简单交互式表单。 The majority of the form is made up of radio buttons in groups of 5 (approx. 37 groups). 表格的大部分由5个一组（约37个组）的单选按钮组成。 I have a label tag for each radio button, and when selected (clicked), the background-color property of the label is changed to a highlighted colour using this JavaScript within each label tag OnClick="this.style.background='#5555ff';" 我为每个单选按钮都有一个标签标签，当选中（单击）标签时，标签的background-color属性使用每个标签标签内的JavaScript更改为突出显示的颜色OnClick="this.style.background='#5555ff';"

What I want to add to the above, is a JavaScript that will remove the above if the selection is changed within the group. 我要添加到上面的是一个JavaScript，如果在组内更改了选择，它将删除上面的内容。 Eg A user selected radio button A in group 1, then changes their selection to radio button B in group 1. At the moment, both label backgrounds will be changed to the defined colour. 例如，用户在组1中选择了单选按钮A，然后将其选择更改为组1中的单选按钮B。此刻，两个标签背景都将更改为定义的颜色。

The HTML form is created dynamically by PHP so radio button names, IDs, & values will differ. HTML表单是由PHP动态创建的，因此单选按钮的名称，ID和值将有所不同。

I have been unsuccessful trying to complete this task myself, and there doesn't seem to be a simple OnUnClick="xxx" either. 我一直无法尝试自己完成此任务，而且似乎也没有简单的OnUnClick="xxx" 。 I have searched on here for a solution but no questions match mine, although I have tried tweaking existing solutions to similar problems but to no avail. 我在这里搜索了一个解决方案，但没有一个问题与我的匹配，尽管我尝试调整现有解决方案来解决类似问题，但无济于事。

Thank you for reading! 感谢您的阅读！

Answer 1

assuming your radio buttons are grouped in a divs like this - 假设您的单选按钮按这样的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>

You can do something like this in jquery - 您可以在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

Here you go: 干得好：

HTML 的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 Java脚本

$(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 );

    })
})

Here is the link to jsfiddle for live demo: http://jsfiddle.net/dharmavir/6UnDs/ 这是jsfiddle的实时演示链接： http : //jsfiddle.net/dharmavir/6UnDs/

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

问题描述

2 个解决方案

解决方案1
0 2012-05-27 10:41:28

解决方案2
0 已采纳 2012-05-27 11:44:48

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

问题描述

2 个解决方案

解决方案1 0 2012-05-27 10:41:28

解决方案2 0 已采纳 2012-05-27 11:44:48

解决方案1
0 2012-05-27 10:41:28

解决方案2
0 已采纳 2012-05-27 11:44:48