使用jquery顯示錶單輸入

我想寫一個jquery代碼，它會在複選框被選中後顯示錶單輸入。這是我如何格式化表單輸入。這樣做的最好方法是什麼？使用jquery顯示錶單輸入

echo '<li class="checkbox_item">'. form_label('Number of bedrooms','bedrooms'). form_checkbox('bedrooms','yes'). form_error('bedrooms').'</li>'; 
    echo '<li class="input_item" id=no_rooms>'. form_label('Number of bedrooms','bedrooms'). form_input('bedrooms'). form_error('bedrooms').'</li>'; 

    echo '<li class="checkbox_item">'. form_label('Number of bathfooms','bathrooms'). form_checkbox('bathrooms'). form_error('bathrooms').'</li>'; 
    echo '<li class="input_item">'. form_label('Number of bathfooms','bathrooms'). form_input('bathrooms'). form_error('bathrooms').'</li>';

來源

2011-07-01 serengeti12

你可以這樣做：

//hide all inputs 
$('.input_item').hide() 

//when a checkbox is ticked, hide/unihde next li 
$('.checkbox_item input').click(function(){ 
    $(this).closest('li').next('.input_item').toggle($(this).is(':checked')); 
});

工作撥弄http://jsfiddle.net/ttyx8/1/

EDIT（我增加了一個選擇到下一個，這樣的代碼是更好）

來源

2011-07-01 14:48:19

尼古拉的回答是，最好的答案是非常簡單，將成爲大多數情況下，更精細的方法是使用get（）函數或積極構建它們，並通過插入到田間地頭加載到DOM html（）函數。這樣做的好處是，除非實際需要，否則這些字段不在DOM中。對於一些複選框來說很小，但如果你要更換或加載大量的數據或元素，這可能是有益的。此外，這種方法將允許更多的動態東西（基於其他輸入的複選框的條件集） – picus

這正是我所需要的。謝謝。我也不知道jsfiddle網站。我認爲它會幫助我很多 – serengeti12

我認爲最好的辦法做的是使用「change（）」事件和「toggle（）」函數。您可以將「change（）」事件綁定到複選框，一旦觸發，「切換」目標元素的顯示。

下面的例子有一個複選框，一旦選中，將顯示一個輸入字段。一旦未選中，輸入字段將被隱藏。

<html> 
<head> 
<script type='text/javascript' 
     src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'> 
</script> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    $('#selectroom').change(function(){ 
     $('#chooseroom').toggle(); 
    }); 
}); 

</script> 

</head> 
<body> 
<p> 
Select bedrooms <input type='checkbox' id='selectroom'/> 
</p> 
<p id='chooseroom' style='display:none;'> 
How many bedrooms? <input type='text' name='roomnumber'/> 
</p> 
</body> 

</html>

來源

2011-07-01 15:06:45

我試圖避免爲每個複選框和輸入使用不同的Id。我需要一些適用於所有複選框和輸入的東西 – serengeti12

使用jquery顯示錶單輸入

回答

相關問題