How to change input type dynamically using jquery or javascript - Stack Overflow

admin管理员组

文章数量:1316588

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.

• javascript
• jquery
• html

Share Improve this question Follow asked May 14, 2013 at 8:54 rishikesh tadakarishikesh tadaka 48311 gold badge66 silver badges1818 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You'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.

本文标签： How to change input type dynamically using jquery or javascriptStack Overflow