How to change checkbox for switch using jQuery?

Question

How to change checkmark for radio button using jQuery?

Answer 1

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

Or using jQuery 1.4

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

You are changing the type attribute because it causes problems in IE.

Answer 2

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

Answer 3

I think you cannot change the type attribute.

alternatively you can use divs: one for checkboxes and the other for radio stations. and use the show() / hide() methods ...