Using tickboxes to select which class to use - html

Question

I am just wondering if there is anyway to make it so that the css class of a DIV can be changed by the selection of a tick box.
For example I have this checkbox HTML
<input type="checkbox" name="size" id="portrait1" value="portrait"> Portrait
<input type="checkbox" name="size" id="landscape1" value="landscape"> Landscape
and then this div (used on concrete5 so might make no sense to some)
<div class="" style="display: none;">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
but i want it so that when I click portrait, for example, the class of that div changes to say portrait, any way of doing this?

Answer 1

You can do this with a bit of JavaScript.
You'll need to bind an event handler to your checkbox (that is, tell the browser to run a chunk of code when a certain event happens: the event in question being changing the state of the checkbox.)
(Note: I am using jQuery in my example for brevity.)
$("checkbox#portrait1").bind('change', function() {
$("div").toggleClass('portrait', $(this).is(":checked"))
});
The above example binds the given function to the "change" event of the given selector (input#portrait1, i.e. input element with the ID of portrait1).
When that event happens, it then "toggles" the class portrait on the div element based on whether the second argument is true or not, meaning if "this" (the checkbox input) is checked, then the class portrait will be added to that div (if not, remove the class of portrait).

Answer 2

Try this....
$('input[name=size]').click(function(){
if($(this).is(':checked'))
$('div').addClass('test')
else
$('div').removeClass('test')
})

Answer 3

Always have a default id for div like
<div class="" style="display: none;" id="a1">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
and in javascript
if(document.getElementById("portrait1").checked == true)
{
document.getElementById("a1").class="portrait";
}
else if(document.getElementById("landscape").checked == true)
{
document.getElementById("a1").class="landscape";
}