html - 使用复选框选择要使用的类(class)

我只是想知道是否还有什么可以做的，以便一个DIV的css类可以通过选择一个勾选框来更改。
例如，我有这个复选框HTML

<input type="checkbox" name="size" id="portrait1" value="portrait"> Portrait
<input type="checkbox" name="size" id="landscape1" value="landscape"> Landscape

然后这个div（用在concrete5上，对某些人来说可能没有意义）

<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>

但我希望这样，例如，当我单击portrait时，div的类将更改为portrait，有什么方法可以这样做吗？

最佳答案

你可以用一点JavaScript来实现。
您需要将事件处理程序绑定到复选框（也就是说，告诉浏览器在某个事件发生时运行一段代码：有问题的事件正在更改复选框的状态）
（注意：为了简洁起见，我在示例中使用jQuery。）

$("checkbox#portrait1").bind('change', function() {
    $("div").toggleClass('portrait', $(this).is(":checked"))
});

上面的示例将给定函数绑定到给定选择器的“change”事件（input#portrait1，即ID为input的portrait1元素）。
当该事件发生时，它将根据第二个参数是否为真来“切换”元素上的类portrait，这意味着如果选中“this”（复选框输入），则类div将被添加到该portrait（如果没有，则删除div的类）。