我有一个表单和一个复选框。通过单击复选框,将显示或隐藏其他div中的div。这个工作!但是,如果我访问我的页面的id像xxxx.php?Id =10,复选框被选中,但div被隐藏。如果我点击复选框,div将显示,但复选框是未选中的(例如mysql更新坏)。希望有人能在这个问题上帮助我。
下面是我的代码:
$(document).ready(function() {
$('#Show').hide();
$("input[name=mycheckbox]").click(function () {
$('#Show').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<div class="form-group">
<div class="form-group">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes"> my option
</label>
</div>
</div>
</div>
<div id="Show">
<div class="form-group">
<label for="textinput" class="control-label">Company </label>
<div class="">
<input type="text" class="form-control" name="name" id="name" placeholder="" value="">
</div>
</div>
</div>
</form>
我的输入字段有以下代码(php在代码片段中不起作用):
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes" <?php if (isset($_GET['id'])) {echo $row->mycheckbox == "yes" ? 'checked="checked"' : "";}?>
谢谢你的帮助!
我建议使用change
事件,在页面加载时使用.trigger('change')
触发,以便div
与复选框元素的状态同步。
你也应该.toggle(display)
$("input[name=mycheckbox]").change(function () {
$('#Show').toggle(this.checked);
}).trigger('change');