如何動態地使用jQuery或JavaScript

，下面來改變輸入類型是我的html代碼：如何動態地使用jQuery或JavaScript

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

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

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

如果我選擇複選框即multiOptions那麼所有的單選按鈕應該轉換成複選框。和如果我取消選中複選框，即multiOptions，那麼所有複選框應該在單選按鈕中轉換。在此先感謝。

來源

2013-05-14 rishikesh tadaka

它不會在Internet Explorer中工作http://stackoverflow.com/questions/2566394/changing-the-input-type-in-ie-with-javascript – 2013-05-14 08:56:22

那麼它的解決方案是什麼？應該有我們可以做到的事情。 – 2013-05-14 08:57:36

您需要實際刪除並重新創建元素，因爲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); 
});

來源

2013-05-14 08:58:19

而不是替換元素可以有兩組，其中一組隱藏取決於複選框：

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。

來源

2013-05-14 09:13:07

+1也是一個不錯的選擇。 – 2013-05-14 09:13:26

如何動態地使用jQuery或JavaScript

回答

相關問題