Question

我想写一个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>';

Answer 1

你可以这样做：

//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/

编辑（我为下一个添加了一个选择器，以便代码更好）

Answer 2

我认为最好的方法是使用“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>

使用jquery显示表单输入

2 个答案: