Question

我有复选框，当我开始制作它们时，会出现一个div。如何使div始终可见，而不仅仅是在标记了复选框时？

实例：https://www.advokatami.bg/poruchki/bundle/ - ＆gt;我说的是复选框总额和总价格出现的div。

以下是我认为负责显示/隐藏元素的javascript：https://codeshare.io/HxNeQ

Answer 1

当您从所提供代码的第208行选中复选框时，会附加您正在谈论的div：

var html = '<dl class="product-addon-totals"><dt>' + woocommerce_addons_params.i18n_addon_total + '</dt><dd><strong><span class="amount">' + formatted_addon_total + '</span></strong></dd>';

所以你必须将div标记与复选框总数一起添加到静态html中，并且只有在通过定位元素span.amount

来选中复选框时才更新价格。

Answer 2

要实现您的目标，您需要按照以下两个步骤继续：

1 - 在页面上的div上显示您想要的内容，并在js的开头准备这样做：

jQuery( document ).ready( function($) {
//shows the cart content on page ready.
var html = '<dl class="product-addon-totals">
                <dt>Checkboxes total:</dt>
                    <dd><strong><span class="amount">0 лв.</span></strong></dd>
                <dt>Total price:</dt>
                    <dd><strong><span class="amount">0 лв.</span></strong></dd>
            </dl>';

$.("#product-addons-total").html(html);

然后，第二步是在清空购物车时使成本等于0，而不是仅删除div的全部内容。要实现这一点，您需要在js中找到对行empty()和303上的函数307的调用，并用以下代码行替换它们：

var html = '<dl class="product-addon-totals">
                    <dt>Checkboxes total:</dt>
                        <dd><strong><span class="amount">0 лв.</span></strong></dd>
                    <dt>Total price:</dt>
                        <dd><strong><span class="amount">0 лв.</span></strong></dd>
                </dl>';

    $.("#product-addons-total").html(html);

当然有更简洁的方法，我会让你编码，但这应该解决你的问题。 ;）

Answer 3

<input type="checkbox" id="checkbox" /> <br />    
<div class ='detail_check show'> detail area<div>


<style>
.show {
  display:block;
}
.hide {
display:none;
}

</style>

$(document).ready(function() {

$('#checkbox').change(function() {
    if($(this).is(":checked")) {
        $('.detail_check')removeClass('show);
        $('.detail_check')addClass('hide);
    } else {
        $('.detail_check')removeClass('hide);
        $('.detail_check')addClass('show);
    }      
});

}）;

你可以用简单的jave脚本＆amp; css代码

Answer 4

这可能不是您的代码的最佳方法，但很高兴看到您也可以只用css来做这种事情。

+选择器直接在span input下面/下方检查type="checkbox"。

:checked仅选择已选中的元素。

input[type="checkbox"] + span { display: none; }
input:checked + span { display: inline; }

<input type="checkbox"><span>Label</span>

如何在未标记复选框时始终显示div元素

4 个答案: