Change a Checkbox for a Radio Button using jQuery

Question

Hi, is this possible, if so how?

Thanks

Answer 1

var checkbox = $("#myCheckbox");
checkbox.replaceWith('<input type="radio" name="'+checkbox.attr('name')+'" value="'+checkbox.attr('value')+'" />');

Or with jQuery 1.4

var checkbox = $("#myCheckbox");
$("<input>",{
    type:'radio',
    name: checkbox.attr('name'),
    value: checkbox.attr('value')
}).replace(checkbox);

You change change the type attribute because it causes problems in IE.

Answer 2

i think you can't change the type attribute.

as an alternative, you can use divs: one for the checkboxes and other for the radios. and use the show() / hide() methods...

Answer 3

given:

<input type="checkbox" name="change" id="change">
<label for="changem">Change Buttons</label><br><br>
<div id="btngroup">
<span><input type="radio" name="btngroup" id="btn-1"></span>
<label for="btn-1">Button 1</label><br>
<span><input type="radio" name="btngroup" id="btn-2"></span>
<label for="btn-2">Button 2</label><br>
<span><input type="radio" name="btngroup" id="btn-3"></span>
<label for="btn-3">Button 3</label><br>
</div>

jQuery:

$(document).ready(function() {
  $('#change').click(function() {
    if( $('#change:checked').length > 0 ) {
      var myType = "checkbox";
    }  else {
      var myType = "radio";
    }
     $("#btngroup span").each(function(i) {
     $(this).html('<input type="' + myType + '" name="btngroup" id="btn-' + (i+1) + '">');
    });
  });
});

​ DEMO