Home/ Questions/Q 8010699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:49:08+00:00

I am trying to create a simple interactive form for use with touch screen

  • 0

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). 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';"

What I want to add to the above, is a JavaScript that will remove the above if the selection is changed within the group. E.g. 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.

The HTML form is created dynamically by PHP so radio button names, IDs, & values will differ.

I have been unsuccessful trying to complete this task myself, and there doesn’t seem to be a simple OnUnClick="xxx" either. 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go:

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

    })
})

    Here is the link to jsfiddle for live demo:
    http://jsfiddle.net/dharmavir/6UnDs/

    • 0