Javascript hide/show 元素无法正常工作

Question

我已将此复选框添加到我的表单中：

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

所以有一个名为 presellTXT() 的 onClick 函数，它是这样的：

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') 从数据库中检索数据）然后它必须显示 Product Presell Text 文本输入。

更新：

我试着添加这个：

#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">

但不起作用并隐藏该元素。

Answer 1

你可以试试这样的东西。

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

默认设置显示为none，根据函数中的条件设置为块/none。

Answer 2

到 hide/show 加载元素然后这可以通过添加像这样的 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 classes 隐藏它，您可以这样做：

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

如果产品为空，则 class 将不存在，如果 class 不存在，您可以使用 CSS 将元素设置为 display: none。让我知道是否可以进一步澄清或者我是否有错误。

编辑：如果产品为空，第二个代码块的更好替代方法是按照下面的建议添加一个隐藏的 class，然后使用它通过 CSS 隐藏它。然后，您可以根据需要通过 JS 简单地添加或删除此 class。

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

Javascript hide/show 元素无法正常工作

Javascript hide/show elements does not work properly

html

javascript

forms

checkbox

laravel