Question

当某人单击一个或多个复选框时，我正在尝试在上市产品中显示底部消息。但是我在页面内什么也看不到。

代码：

 <style>
        .box{
            color: #eee;
            padding: 20px;
            display: none;
            margin-top: 20px;
        }
        .green{ background: #228B22; }
        label{ margin-right: 15px; }
    </style>

// loop to display the products with the checkbox

                while($Qlisting->fetch()) {
...
    echo '<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>';
...
                }

<div class="green" style="display:none;">Your message</div>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});
</script>

Answer 1

Toggle（）用于在display：inline和display：none之间进行间隔；您目前正在尝试将没有匹配类的元素切换到选择器。 ('.' + inputValue)

使用与相应复选框值相同的类创建要在div中显示的消息。

示例：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>

<div class="green" style="display:none;">Your message</div>

单击复选框显示底部消息

1 个答案: