Question

如何验证是否存在使用display:none的div

$("input[name$='test']").click(function() {
  var test = $(this).val();

  $("div.desc").hide();
  $("#test" + test).show();
});

$(".check").click(function(){
    var name = $("#name").val();
  var add = $("#add").val();
  var hobby = $("#hobby").val();
  
  if( name == "" ){
    $("#name").css('border', '1px solid red');
    return false
  } else if ( add == "" ){
    $("#add").css('border', '1px solid red')
  } else if ( hobby == "" ){
    $("#hobby").css('border', '1px solid red')
  } else {
    alert('success');
    return true
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
  <div class="condition">
    <input type="radio" name="test" checked="checked" value="Y" id="first" />
    <label for="first">First</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="N" id="second" />
    <label for="second">Second</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="YN" id="third" />
    <label for="third">Third</label>
  </div>
</div>

<div id="testY" class="desc">
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

<div id="testN" class="desc" style="display:none">
  <label for="add">Add</label>
  <input type="text" id="add" />
</div>

<div id="testYN" class="desc" style="display:none">
  <label for="hobby">Hobby</label>
  <input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

当我填写第一个内容并单击验证时，它应该发出成功警报，因为我的目的是验证div是否显示。

有什么主意吗？

谢谢

Answer 1

您可以找到需要首先通过选中的单选值检查的输入，然后验证此输入：

$("input[name$='test']").click(function() {
  var test = $(this).val();

  $("div.desc").hide();
  $("#test" + test).show();
});

$(".check").click(function(){
    let checked = $("input[name$='test']:checked").val();
    let input = $("#test" + checked).find('input');
    let val = input.val();
    if(!val){
      $(input).css('border', '1px solid red');
      return false
    }
    alert('success');
    return true
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
  <div class="condition">
    <input type="radio" name="test" checked="checked" value="Y" id="first" />
    <label for="first">First</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="N" id="second" />
    <label for="second">Second</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="YN" id="third" />
    <label for="third">Third</label>
  </div>
</div>

<div id="testY" class="desc">
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

<div id="testN" class="desc" style="display:none">
  <label for="add">Add</label>
  <input type="text" id="add" />
</div>

<div id="testYN" class="desc" style="display:none">
  <label for="hobby">Hobby</label>
  <input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

验证输入（如果使用show hide jQuery

1 个答案: