时间戳

首页 > 解决方案 > 问题根据复选框状态更改输入字段属性

javascript - 问题根据复选框状态更改输入字段属性

问题描述

我正在使用一个复选框来显示一些包含在 div 中的输入字段。单击复选框时，div 显示正确，未单击时，div 隐藏工作正常。默认情况下，div 中的输入字段不是必需的（可选）。

我想创建一个 Js 逻辑，如果用户单击复选框，则字段应将属性更改为强制/必需。

是Js学习者，请帮忙？

用于隐藏或显示下面 div 的复选框代码

<label class="spouse-me">
    <h1 class="pumba">Spouse</h1>
    <input type="hidden" class="spouse" value="0" />
    <input type="checkbox" id="spouse" value="1" class="spouse" onclick="checkMark()">
</label>

复选框显示或隐藏的 div

//Parent div
<div class="spouseDetail" id="spouseDetail" style="display:none;">
  //Child div
  <div class="form-line registar love {{ $errors->has('spousename') ? ' has-error' : '' }}" style="margin-left: 0px;">
    <input type="text-area" class="form-input" name="spousename" id="spouseName" value="{{ old('spousename') }}">
    <label>Spouse Name *</label>
    <div class="error-label">Field is required!</div>
    <div class="check-label"></div>
    @if ($errors->has('spousename'))
        <span class="help-block">
            <strong>{{ $errors->first('spousename') }}</strong>
        </span>
    @endif
</div>

<div class="form-line registar love {{ $errors->has('spousedob') ? ' has-error' : '' }}">
  <input type="date" class="form-input" name="spousedob" id="spouseDob" value="{{ old('spousedob') }}">
  <label>Date of Birth *</label>
  <div class="error-label">Field is required!</div>
  <div class="check-label"></div>
  @if ($errors->has('spousedob'))
        <span class="help-block">
        <strong>{{ $errors->first('spousedob') }}</strong>
        </span>
  @endif
</div>

</div>

Javascript 函数

  function checkMark() {
      var checkBox = document.getElementById("spouse");
      var text = document.getElementById("spouseDetail");

      // If the checkbox is checked, display the output text
      if (checkBox.checked == true){
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
    }

标签： javascripthtml

解决方案

也许你可以尝试这样的事情。

  if (checkBox.checked == true){
    text.style.display = "block";
    var inputElm = document.getElementsByTagName(INPUT);
    for(var i=0; i<inputElm.length; i++) {
        inputElm[i].required = true;
    }
  } else {
    text.style.display = "none";
  }

推荐阅读