Question

我只是想知道是否有任何方法可以通过选择一个复选框来改变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>

但我想要它，以便当我点击肖像时，例如，该div的类改变为肖像，任何方式这样做？

Answer 1

你可以用一点JavaScript来做到这一点。

你需要将一个事件处理程序绑定到你的复选框（也就是说，告诉浏览器在某个事件发生时运行一大块代码：有问题的事件正在改变复选框的状态。）

（注意：为了简洁，我在我的例子中使用了jQuery。）

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

上面的示例将给定函数绑定到给定选择器的“change”事件（input#portrait1，即ID为input的{{1}}元素。

当该事件发生时，它会根据第二个参数是否为真来“切换”portrait1元素上的类portrait，这意味着“this”（复选框输入）是选中后，课程div将添加到portrait（如果没有，请删除div类。）

Answer 2

试试这个......

$('input[name=size]').click(function(){

if($(this).is(':checked'))
  $('div').addClass('test')
else
$('div').removeClass('test')

})

Answer 3

始终拥有div的默认ID，如

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

并在javascript中

if(document.getElementById("portrait1").checked == true)
{
document.getElementById("a1").class="portrait";
}
else if(document.getElementById("landscape").checked == true)
{
document.getElementById("a1").class="landscape";
}

使用复选框选择要使用的类

3 个答案: