Как изменить тип входа динамически с помощью JQuery или JavaScript

Question

Ниже мой 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, тогда все флажки должны конвертироваться в переключатели. благодарит заранее.

Answer 1

Вам необходимо будет удалить и воссоздать элементы, потому что IE не позволит вам изменить typeinput после его создания.

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); 
}); 

Answer 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.