Jquery - hide/show based on checkbox value

Question

Hi I have the following Form:

               {{ 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() }}

and the following script:

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

This works fine when unchecking, but when checking again this doesn't show the form?

Any ideas?

Thanks! Alough it never answered my question it pointed me to the problem. I need to be fiding an element #arma2-mysql no .arma2-mysql! — Ricky Barnett
– Ricky Barnett, Commented Jan 15, 2015 at 19:10

itamar · Accepted Answer · 2015-01-15 19:08:23Z

2

Try using toggle:

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

answered Jan 15, 2015 at 19:08

itamar

3,9775 gold badges37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

indubitablee · Accepted Answer · 2015-01-15 19:11:36Z

2

something like this? 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>

answered Jan 15, 2015 at 19:11

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Comments

Joe W · Accepted Answer · 2015-01-15 19:10:46Z

1

This is a class selector:

$('.arma2-mysql')

It looks like it should be an ID selector based on your html:

$('#arma2-mysql')

You also might consider using the Jquery toggle call to show/hide and you can dispense with the if statement all together.

answered Jan 15, 2015 at 19:10

Joe W

2,93118 silver badges36 bronze badges

Comments

Ricky Barnett · Accepted Answer · 2015-01-15 19:11:34Z

0

Fixed,

The issue was I was searching for the class .arma2-mysql when my element never had this class, instead it has an ID #arma2-mysql

answered Jan 15, 2015 at 19:11

Ricky Barnett

1,1704 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery - hide/show based on checkbox value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related