0

我正在尝试创建一个用于触摸屏设备的简单交互式表单。表单的大部分由 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 tagOnClick="this.style.background='#5555ff';"

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

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

我自己尝试完成这个任务一直没有成功，而且似乎也没有一个简单OnUnClick="xxx"的。我在这里搜索了一个解决方案，但没有任何问题与我的匹配，尽管我尝试调整现有解决方案以解决类似问题但无济于事。

感谢您的阅读！

4

2 回答 2

0

假设您的单选按钮被分组在这样的 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');
});
于 2012-05-27T10:41:28.177 回答
0

干得好：

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/

于 2012-05-27T11:44:48.650 回答