如何顯示DIV元素總是當複選框未標記

Question

我有複選框，當我開始馬林他們，出現一個股利。我怎樣才能讓div始終可見，而不僅僅是當複選框被標記時？

現場示例：https://www.advokatami.bg/poruchki/bundle/ - >我正在談論複選框總計和總價格出現的div。

這是我認爲的JavaScript負責顯示/隱藏的元素：https://codeshare.io/HxNeQ

Answer 1

實現你的目標，你需要進行以下兩個步驟：

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

}）;

你可以用簡單的java的腳本& 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中，並且僅在通過定位元素span來檢查複選框時更新價格。附件

Answer 4

這可能不是您的代碼的最佳方法，但很高興看到你也可以用css做這種東西。

+選擇器直接檢查span直接在/下的input。

:checked只選擇一個選中的元素。

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

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