Question

您好我有以下表格：

               {{ Form::open(array('url' => 'profile', 'class' => 'form-horizontal')) }}
                        <div class="checkbox-custom fill checkbox-success mb5">
                            <fieldset class="arma2-mysql-question">
                                {{ Form::checkbox('arma2-mysql', '', $user->arma2_mysql, ['id' => 'arma2-mysql', 'onChange' => 'valueChanged()']) }}
                                {{ Form::label('arma2-mysql', 'Arma2 MySQL') }}
                            </fieldset>
                        </div>
                        <fieldset class="arma2-mysql-answer">
                            {{ Form::label('databaseip', 'Database IP') }}
                            {{ Form::text('databaseip', $user->arma2_mysql_ip, array('class' => 'form-control')) }}
                            {{ Form::label('database', 'Database') }}
                            {{ Form::text('database', $user->arma2_mysql_database, array('class' => 'form-control')) }}
                            {{ Form::label('databaseusername', 'Database Username') }}
                            {{ Form::text('databaseusername', $user->arma2_mysql_username, array('class' => 'form-control')) }}
                            {{ Form::label('databasepassword', 'Database Password') }}
                            {{ Form::password('databasepassword', array('class' => 'form-control')) }}
                        </fieldset>
                {{ Form::close() }}

以及以下脚本：

function valueChanged() {
if ($('.arma2-mysql').is(':checked')) {
    $(".arma2-mysql-answer").hide();
} else {
    $(".arma2-mysql-answer").show();
} 
}

取消选中时效果很好，但再次检查时，这不会显示表单吗？

有什么想法吗？

Answer 1

尝试使用切换：

$('.arma2-mysql').change(function(){
$('.arma2-mysql-answer').toggle(!this.checked);
});

Answer 2

这样的事情？ http://jsfiddle.net/swm53ran/100/

$(document).ready(function() {
    $('.checkbox').on('change', function() {
        $('.shownDiv').toggle();
    });
});

<input class="checkbox" type="checkbox" /> Show div
<br/><br/>
<div class="shownDiv" style="display:none;">Shown when checked</div>

Answer 3

这是一个类选择器：

$('.arma2-mysql')

看起来它应该是基于你的html的ID选择器：

$('#arma2-mysql')

你也可以考虑使用Jquery toggle调用来显示/隐藏，你可以一起免除if语句。

Answer 4

固定，

问题是当我的元素从未有过这个类时，我正在搜索类.arma2-mysql，而是它有一个ID #arma2-mysql

Jquery - 基于复选框值隐藏/显示

4 个答案: