Below is the my html code:
<input type="checkbox" id="multiOptions" />IsForMultioptions
<input type="radio" value="1" name="option">option1
<input type="radio" value="2" name="option">option2
If I select checkbox i.e. multiOptions then all radio buttons should be convert into checkboxes. and If I uncheck the checkbox i.e. multiOptions then all checkboxes should convert in radio buttons. thanks in advance.
Below is the my html code:
<input type="checkbox" id="multiOptions" />IsForMultioptions
<input type="radio" value="1" name="option">option1
<input type="radio" value="2" name="option">option2
If I select checkbox i.e. multiOptions then all radio buttons should be convert into checkboxes. and If I uncheck the checkbox i.e. multiOptions then all checkboxes should convert in radio buttons. thanks in advance.
Share Improve this question asked May 14, 2013 at 8:54 rishikesh tadakarishikesh tadaka 4831 gold badge6 silver badges18 bronze badges 2- 2 It will not work in Internet Explorer stackoverflow./questions/2566394/… – Arun P Johny Commented May 14, 2013 at 8:56
- Then what is the solution for it? There should be something by that we can achieve this. – rishikesh tadaka Commented May 14, 2013 at 8:57
2 Answers
Reset to default 5You'll need to actually remove and recreate the elements, because IE doesn't let you change the type of an input after it's created.
jQuery makes this fairly easy with replaceWith:
$("selector for the input to change").replaceWith('<input type="checkbox">');
So for instance:
$('input[type="radio"][name="option"]').each(function() {
$(this).replaceWith('<input type="checkbox" name="option" value="' + this.value + '">');
});
Or if the values may contain characters requiring entities:
$('input[type="radio"][name="option"]').each(function() {
var rep = $('<input type="checkbox" name="option">');
rep.attr("value", this.value);
$(this).replaceWith(rep);
});
Instead of replacing the elements you can have two groups of which one is hidden depending on the checkbox:
HTML
<input type="checkbox" id="multiOptions">IsForMultioptions</input>
<div id="radios">
<input type="radio" value="1" name="option">option1</input>
<input type="radio" value="2" name="option">option2</input>
</div>
<div id="checkboxes">
<input type="checkbox" value="1" name="option">option1</input>
<input type="checkbox" value="2" name="option">option2</input>
</div>
jQuery
$(document).ready(function() {
$('#checkboxes').hide();
$('#multiOptions').on('click', function() {
if ($(this).is(':checked')) {
$('#radios').hide();
$('#checkboxes').show();
}
else {
$('#radios').show();
$('#checkboxes').hide();
}
});
});
jsFiddle example.