チェックボックスが表示されていないときに常にdiv要素を表示する方法

Question

私はチェックボックスを持っており、それらをマウリングし始めるとdivが表示されます。チェックボックスにチェックマークが付いているときだけでなく、divを常に表示できるようにするにはどうすればよいですか？

ライブ例：https://www.advokatami.bg/poruchki/bundle/ - >私は、チェックボックスの合計と合計価格が表示されるdivについて話しています。ここで

は、私は要素の表示/非表示に責任があると思うのjavascriptです：https://codeshare.io/HxNeQ

Answer 1

は、あなたの目標を達成するために、あなたは2段階以下の続行する必要があります。

1 - JSの冒頭でこうページ準備のdiv要素にしたいコンテンツを表示します：

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

次に、カートを空にしたときのコストをゼロにすることです。 divの全内容あなたがライン303と307上の機能empty()にjsの呼び出しで見つけて、次のコード行でこれらを交換する必要があり、この達成するために：

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 2

<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スクリプト& CSSコードで行うことができます

Answer 3

あなたがチェックボックスは、あなたが提供されているコードの行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に追加し、エレメントをターゲットにしてチェックボックスをオンにしたときに価格を更新する必要があります.amount

Answer 4

これはコードにとって最適な方法ではないかもしれませんがそれは素晴らしいですあなただけのCSSでこの種のものを行うこともできます参照してください。 type="checkbox"のinput下/直接次spanため

+セレクタチェック。

:checkedは、チェックされた要素のみを選択します。

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

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