Блог

Главная - Вопросы по программированию - Ввод проверки при использовании show hide jQuery

Ввод проверки при использовании show hide jQuery

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Как мне проверить, есть ли div, который использует display:none 

 $("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.

Есть идеи?

Спасибо

Ответ №1:

Вы можете найти ввод, который необходимо проверить, сначала проверив значение checked radio, а затем подтвердив этот ввод:

 $("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>