Radio button default checked

astrixtech

Hi , I am using the below code to convert the checkboxes in a list to radio buttons

var element = checkbox.replaceWith('<input type="radio" id="rdList" style="width:12px; height:12px;" value="'+checkbox.attr('value')+'"/>');

This changes all the check boxes to radio buttons. Since I needed on of the radio button to be checked ,I used the below code.

document.getElementById("myradio").checked = true;

This makes the first list item to be checked but only for few seconds. Then it unchecks by itself. I also used the below code for the same purpose.

$("#myradio")[0].checked = true;

The result is the same. Any idea why the check status doesnt stay as it is? Many thanks in advance.

astrixtech

If any one could help, then that will be greatly appreciated as I am stuck with this issue. I have googled a lot. But still I didnt get an answer why the selection disappears after few seconds. :(

thanh_bkhn

What does "uncheck by itself" means? Do you have the refresh interval or element regenerate interval? Btw, your radio buttons have "rdList" in their id, but you used "myradio" to access them.

astrixtech

Uncheck means, deselected by its own. Suppose if any user checks a radio button, the whole list item will be highlighted showing its selected. But here, the list item is not highlighted ,only the radio button is checked.And that state is not stable. I dont have any refresh interval implemented. And the id is rdList. Its a typo. :doh: ,my mistake :-D

thanh_bkhn

I still have no idea about why your radio button got deselected by its own. But as you describe, if you want all your radio buttons act like a "group", you should set a name for all of them, like:

astrixtech

I have tried putting them in a group and making the first element checked. But the result is the same. Just now I have added runat="server" in radio button control. After that when I used document.getElementById("rdList").checked = true;, it threw error saying getelementID is having Null object. When I used $("#rdList")[0].checked = true;, it threw error saying '0' is null.

thanh_bkhn

You got error because of [runat="server"]. I can't understand why a radio got deselected by itself. Can you post your complete HTML code?

astrixtech

Okay I thought the code started to work a bit cos of runat attribute. Thanks for the info. :) Please find below the code.

$(document).ready(function() {
var chbx = $(".s4-itm-cbx");
var element = chbx.replaceWith('<input type="radio" runat="server" name="rdList" style="width:12px; height:12px;" value="'+checkbox.attr('value')+'"/>');
//document.getElementById("#rdList").checked = true;
//$("#rdList").checked = true;
//$(this).trigger('click');
//$('input:radio[name=rdList]')['0'].checked = true;
$('input:radio[name=rdList]:nth(0)').attr('checked',true);
$("input:radio[name=rdList]:checked").trigger('click');

$("input[type='radio']").click(function(){
var crbx = document.activeElement;
$("input[type='radio']").each(function () {
if(this!= crbx && this.checked == true){
this.checked = false;
$(this).trigger('click');
}
});
});
});

Couple of other information: I am creating a Sharepoint list,where checkboxes are allowed. The requirement is ,the user should be able to select only one listitem at a time.Thats why I am changing the checkboxes to radio button. Again, the first list item should be selected by default.Hope, this information is sufficient.