CODEWITHSUNDEEP
javascriptjquerycheckbox
Bob Sanders
Bob Sanders

Reputation: 51

Jquery check boxes

I want to do the following:

I have three checkboxes:

Hide Box1 Hide Box2 Hide Box3

I want to use Jquery to:

When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. Also where do I place the code?

Thanks in advance

Upvotes: 0

Views: 141

Answers (3)

Daniel Imms
Daniel Imms

Reputation: 50149

Here is a complete example using the markup you gave in the comment. I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable).

See on JSFiddle

HTML

<form>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box1" />
        <label for="box1">Hide Box1</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box2" />
        <label for="box2">Hide Box2</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkbox3" id="box3" />
        <label for="box3">Hide Box3</label>
    </div>
</form>

jQuery

$('.toggle-checkbox input[type=checkbox]').click(function () {
    if ($(this).is(':checked')) {
        $('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
    } else {
        $('.toggle-checkbox').show();
    }
});

To include jQuery in your page, place the following within your <head> tag.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Upvotes: 1

Leah Sapan
Leah Sapan

Reputation: 3791

Assuming your checkboxes have the ids "box1", "box2" and "box3":

$(document).ready(function(){
    $("#box1").change(function(){
        $("#box2, #box3").toggle();
    }
}

I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes.

The optimal place for your code would be inside of a script element located just before your closing body tag, so something like

<body>
Your page stuff here
<script>
Code from above here
</script>
</body>

Upvotes: 0

David Chase
David Chase

Reputation: 2073

You could do this in between tags

$('.one').click(function () {
if ($(this).is(':checked')) {
    $('input[type=checkbox]').not(this).hide();
} else {
    $('input[type=checkbox]').not(this).show();
}
});

http://jsfiddle.net/davidchase03/MYASr/

Upvotes: 0

Related Questions