Dear all,

I am relatively new to Tizen and web programming. I am currently implememting my app in Samsung Gear S. In my app, I need to show up a popup with radio box so users can select the option they want. I implement this function based on the Samsung Web GUI example where the code in my index.html looks like this:

<div id="radioPopup" class="ui-popup"> 
    <div class="ui-popup-header">Ringtones</div>
    <div class="ui-popup-content">
        <ul class="ui-listview">
            <li class="li-has-radio">
                <label> Option1 
                    <input type="radio" name="radioset" id="radio-1" checked="checked" /> 
                </label> 
            </li>
            <li class="li-has-radio"> 
                <label> Option2 
                    <input type="radio" name="radioset" id="radio-2" /> 
                </label> 
            </li>
    <div class="ui-popup-footer">
        <a id="radioPopup-close" href="#" class="ui-btn" data-rel="back">Close</a> 
    </div> 
</div>

The UI of this code work perfectly (user can select the option and the radio index will be cheked and remembered). However, I am not sure how to retrieve the result of user’s selection. My first attemp is to retrieve the “checked” atrribute as the following:

function closePopup() {
    for(var i=0;i<2.length;i++){
        var radioCheck = document.getElementById('radio-'+i);
        var checkAttr = radioCheck.getAttribute("checked");
        var isChecked = radioCheck.classList.contains('checked');
        if(isChecked){
            console.log('is checked'); 
            targetNamesIdx = i;
        } else {
        	console.log('not checked');
        }   
    }
        	
    console.log('targetNamesIdx = '+targetNamesIdx);
    tau.closePopup();
}

However, the “checked” attribute seems not updated (even though the UI is updated). Could anyone please let me know how to address this problem? Any suggestion/hint will be very appreciated!!