ユーザーが情報を入力するテストを選択できる状況があります。例:
Test1
Test2
Test3
Test4
選択がTest1、Test3と言うとき、これら2つのテキストボックスフィールド(Test1、Test2)だけでフォームを作成する必要があります。ユーザーが選択したオプションをループしてからショーを実行し、jquery で非表示にすることを考えていましたが、これが最善の方法であるかどうかはわかりません。ユーザーが選択したフィールドを表示するエレガントな方法はありますか?
ユーザーが情報を入力するテストを選択できる状況があります。例:
Test1
Test2
Test3
Test4
選択がTest1、Test3と言うとき、これら2つのテキストボックスフィールド(Test1、Test2)だけでフォームを作成する必要があります。ユーザーが選択したオプションをループしてからショーを実行し、jquery で非表示にすることを考えていましたが、これが最善の方法であるかどうかはわかりません。ユーザーが選択したフィールドを表示するエレガントな方法はありますか?
このようなものは簡単かもしれません:
<ul id="textboxes">
<li>
<input type="checkbox" id="c1" name="c1" />
<input type="text" id="t1" name="t1" />
</li>
<li>
<input type="checkbox" id="c2" name="c2" />
<input type="text" id="t2" name="t2" style="display:none" />
</li>
<ul>
次に、jQuery:
$('input[type="checkbox"]').click(function() {
var id = $(this).attr('id').replace('c','');
$('#t'+id).slideToggle();
});
明らかに、そこにさらに多くのボックスを配置できます。より動的な方法で無制限に進む場合は、フィールドを実際に追加します。
$(':checkbox').each(function(){ //loop through your checkboxes
if($(this).prop('checked')) { //if the current checkbox is checked
var text = $(this).text(); //Test1, Test2 or whatever it might be. Would probably be better to store as a data-attribute on the checkbox
var $textfield = $('<input/>').attr({ type: 'text' }).val(text); //generate a textfield with the selected text from the checkbox
$('#yourForm').append($textfield); //add textfield to the form
}
$('#yourForm').show();
});