如何使用 jquery 或 javascript 动态更改输入类型答案

【问题标题】：How to change input type dynamically using jquery or javascript如何使用 jquery 或 javascript 动态更改输入类型
【发布时间】：2013-05-14 08:54:48
【问题描述】：

下面是我的html代码：

<input type="checkbox" id="multiOptions" />IsForMultioptions

<input type="radio" value="1" name="option">option1

<input type="radio" value="2" name="option">option2

如果我选择复选框，即 multiOptions，则所有单选按钮都应转换为复选框。如果我取消选中复选框，即 multiOptions 则所有复选框都应转换为单选按钮。提前致谢。

【问题讨论】：

在 Internet Explorer 中无法使用 stackoverflow.com/questions/2566394/…
那有什么解决办法呢？应该有一些东西我们可以做到这一点。

标签： javascript jquery html

【解决方案1】：

您需要实际删除并重新创建元素，因为 IE 不允许您在创建后更改 input 的 type。

jQuery 使用replaceWith 使这变得相当容易：

$("selector for the input to change").replaceWith('<input type="checkbox">');

例如：

$('input[type="radio"][name="option"]').each(function() {
    $(this).replaceWith('<input type="checkbox" name="option" value="' + this.value + '">');
});

或者如果值可能包含需要实体的字符：

$('input[type="radio"][name="option"]').each(function() {
    var rep = $('<input type="checkbox" name="option">');
    rep.attr("value", this.value);
    $(this).replaceWith(rep);
});

【讨论】：

【解决方案2】：

您可以拥有两组元素，而不是替换元素，根据复选框隐藏其中一组：

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.

【讨论】：