Question

I have a jquery template with N radio buttons and I need to select radio button with value that I pass after loading template from external html file(using jQuery.tmpl() method). Is there a good way of selection of radio button in template without multiple {{if}}, {{else}} statements, duplicate code and selectors?

Answer 1

In what format is your data coming back from the server? If it’s a JSON array, could you do something like this?

html:

<script id="myTemplate" type="text/html">
    <input type="radio" value="${value}"{{if selected}} checked{{/if}}>${name}</input><br />
</script>

<div id="myDiv">
</div>

javascript:

var myData = [
    {name: 'test 1', value : 'radio1', selected : false},
    {name: 'test 2', value : 'radio2', selected : false},
    {name: 'test 3', value : 'radio3', selected : true},
    {name: 'test 4', value : 'radio4', selected : false}
];

$('#myTemplate').tmpl(myData).appendTo('#myDiv');

http://jsfiddle.net/JbTwB/1/