Home/ Questions/Q 1039907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T15:09:30+00:00

jQuery UI seems to be sensitive to the attributes of the elements that compose

  • 0

jQuery UI seems to be sensitive to the attributes of the elements that compose a widget. How then can I use the same widget mutiple times in a single page\form?

Example – the radio select widget, which comes in the demo index.html file that downloads with jQuery-ui:

<!DOCTYPE html> 
<html>
    <head> 
        ...
        $(function(){
            $("#radioset").buttonset();
        }
        ...
    </head>
    <body>
        ...
        <form style="margin-top: 1em;"> 
            <div id="radioset"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
        </form> 
        ...
    </body>
</html>

What code then should I add to have a second div with a different set of radio buttons?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
       $(function(){
            $("#radioset2").buttonset();
        }
<div id="radioset2">

    Or you could use

    $(".radioset").buttonset();

    Wich would select the radioset class not the id so you could have many.

    To address your comment:

    $(function(){
                $("#radioset1").buttonset();
                $("#radioset2").buttonset();
            }

<form name="form1" style="margin-top: 1em;"> 
            <div id="radioset1"> 
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
            </div> 
</form>
<form name="form2" style="margin-top: 1em;"> 
            <div id="radioset2"> 
                    <input type="radio" id="radioAgain1" name="radio" /><label for="radio1">Choice 1</label>
                    <input type="radio" id="radioAgain2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
                    <input type="radio" id="radioAgain3" name="radio" /><label for="radio3">Choice 3</label>
                </div> 
        </form>

    I see no reason for the above not to work.

    • 0