Javascript隱藏/顯示元素無法正常作業

我已將此復選框添加到我的表單中：

<div class="row">
  <div class="form-group col">
    <input type="checkbox" name="prd_presell" id="product_presell" 
      onclick="presellTXT()" value="TRUE" @if(!empty($product)) @if($product->prd_presell == 'TRUE') checked @endif @endif>
    <label for="presell_product">Presell Product</label>
  </div>
</div>

所以有一個名為 onClick 的函式presellTXT()，如下所示：

function presellTXT() {
        var presell_checkbox = document.getElementById("product_presell"); // get checkbox
        
        var presell_text = document.getElementById("show_presell_text"); // text div
        
        var presell_text_input = document.getElementById("presell_product_text"); // text input
        
        if (presell_checkbox.checked == true){
            presell_text.style.display = "block";
        } else {
            presell_text_input.value = "";
            presell_checkbox.value = "";
            presell_text.style.display = "none";
        }
    }

因此，當復選框被選中時，它基本上顯示了具有 id 的元素show_presell_text：

<div class="row" id="show_presell_text">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>

因此，當頁面加載時，除非選中該復選框，否則它不應顯示產品預售文本。

現在，如果您查看jsfillde示例，您可以看到頁面加載后，文本輸入就會出現，但根本沒有選中復選框！

那么如何在頁面加載且未選中復選框時隱藏文本輸入呢？

注意：我不想為此使用 CSS，因為我需要正確確定是否prd_presell在頁面加載時檢查（因為@if($product->prd_presell == 'TRUE')它從資料庫檢索資料）然后它必須顯示產品預售文本文本輸入。

更新：

我試著添加這個：

#show-presell-text.hidden {
    display: none !important;
}

并將其添加到 div：

<div class="row" id="show_presell_text" class="@if(!empty($product)) @if($product->prd_presell != 'TRUE') hidden @endif @endif">

但不起作用并隱藏元素。

uj5u.com熱心網友回復：

在加載時隱藏/顯示元素，然后可以通過添加像這樣的 if 陳述句來輕松完成

@if (!empty($product))
<div class="row" id="show_presell_text">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>
@endif

如果為空，這將完全省略您在頁面加載時想要的元素，您可以通過 JS 代碼添加它。但是，如果您只想使用 CSS 類隱藏它，您可以這樣做：

<div class="row" id="show_presell_text" class="@if (empty($product)) hidden @endif">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>

如果產品為空，則該類將不存在，如果該類不存在，您可以使用 CSS 將該元素設定display: none為。讓我知道我是否可以進一步澄清或者我是否有什么問題。

編輯：如果產品為空，則第二個代碼塊的更好替代方法是添加一個隱藏類，如下所示，如果產品為空，然后使用它通過 CSS 隱藏它。然后，您可以根據需要通過 JS 簡單地添加或洗掉此類。

#show-presell-text.hidden {
display: none;
}

uj5u.com熱心網友回復：

你可以嘗試這樣的事情。

<div class="row" id="show_presell_text" style="display: none">

默認情況下將顯示設定為無，并根據功能中的條件將其設定為塊/無。

標籤：javascript html 拉拉维尔 形式 复选框

上一篇：Laravel選擇，根據用戶group_id自動選擇值

下一篇：Laravel路由設定錯誤和搜索功能問題