Jquery скрывается / скрывается при изменении флажка не работает, как ожидалось - PullRequest
Новая
       35

Jquery скрывается / скрывается при изменении флажка не работает, как ожидалось

0 голосов
/ 14 февраля 2019

Простите за любые вредные привычки, я играю с html и jquery все 48 часов.

Я пытаюсь скрыть / показать поля ввода, на основе которых установлены флажки.А затем скрыть все поля, если установлен флажок «Нет».

У меня возникают проблемы с кодом ниже, показывающим поля ввода, пока флажки не будут отмечены / сняты один раз.Тогда они начинают вести себя так, как должны.У меня также есть поле «Нет», которое работает, сняв флажки с других полей, но это не приводит к тому, что поля скрываются, как я и надеялся.

Есть предложения?

TLDR: поля DIV не должныне будет видно, пока не установлен соответствующий флажок.Все поля DIV должны исчезнуть, если установлен флажок «Нет».

$('#checkboxes-0').change(function() {
  if (this.checked)
    $('#blank_co').fadeIn('slow');
  else
    $('#blank_co').fadeOut('slow');

});

$('#checkboxes-1').change(function() {
  if (this.checked)
    $('#fresh_co').fadeIn('slow');
  else
    $('#fresh_co').fadeOut('slow');

});

$('#checkboxes-2').change(function() {
  if (this.checked)
    $('#marine_co').fadeIn('slow');
  else
    $('#marine_co').fadeOut('slow');

});

$('#checkboxes-3').change(function() {
  if (this.checked)
    $('#rain_co').fadeIn('slow');
  else
    $('#rain_co').fadeOut('slow');
});

var $others = $('input[name="checkboxes"]').not('#checkboxes-4')
$('#checkboxes-4').change(function() {
  if (this.checked) {
    $others.prop('checked', false)
  }
});
$others.change(function() {
  if (this.checked) {
    $('#checkboxes-4').prop('checked', false)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">

  <label class="col-md-4 control-label" for="checkboxes">
    Select any desired backgrounds:</label>
  <div class="col-md-4">
    <label class="checkbox-inline" for="checkboxes-0">
          <input name="checkboxes" id="checkboxes-0" type="checkbox" value="blanks">
          Blanks
        </label>
    <label class="checkbox-inline" for="checkboxes-1">
          <input name="checkboxes" id="checkboxes-1" type="checkbox" value="fresh">
          Fresh Water
        </label>
    <label class="checkbox-inline" for="checkboxes-2">
          <input name="checkboxes" id="checkboxes-2" type="checkbox" value="marine">
          Marine Water
        </label>
    <label class="checkbox-inline" for="checkboxes-3">
          <input name="checkboxes" id="checkboxes-3" type="checkbox" value="rain">
          Rain
        </label>
    <label class="checkbox-inline" for="checkboxes-4">
          <input name="checkboxes" id="checkboxes-4" type="checkbox" value="none">
          None
        </label>
  </div>
</div>

<!-- Text input-->
<div id="blank_co" div class="form-group">
  <label class="col-md-4 control-label" for="blankbg">Blanks cutoff: (1-99)</label>
  <div class="col-md-4">
    <input name="blankbg" class="form-control input-md" id="blankbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="fresh_co" div class="form-group">
  <label class="col-md-4 control-label" for="freshbg">Fresh water cutoff: (1-99)</label>
  <div class="col-md-4">
    <input name="freshbg" class="form-control input-md" id="freshbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="marine_co" div class="form-group">
  <label class="col-md-4 control-label" for="marinebg">Marine water cutoff: (1-99)</label>
  <div class="col-md-4">
    <input name="marinebg" class="form-control input-md" id="marinebg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="rain_co" div class="form-group">
  <label class="col-md-4 control-label" for="rainbg">Rain water cutoff: (1-99)</label>
  <div class="col-md-4">
    <input name="rainbg" class="form-control input-md" id="rainbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Это может быть то, что вам нужно. 

<body>
    <!-- Multiple Checkboxes (inline) -->
    <div class="form-group">


<label class="col-md-4 control-label" for="checkboxes">
Select any desired backgrounds:</label>
  <div class="col-md-4">
    <label class="checkbox-inline" for="checkboxes-0">
      <input name="checkboxes" id="checkboxes-0" type="checkbox" value="blanks">
      Blanks
    </label>
    <label class="checkbox-inline" for="checkboxes-1">
      <input name="checkboxes" id="checkboxes-1" type="checkbox" value="fresh">
      Fresh Water
    </label>
    <label class="checkbox-inline" for="checkboxes-2">
      <input name="checkboxes" id="checkboxes-2" type="checkbox" value="marine">
      Marine Water
    </label>
    <label class="checkbox-inline" for="checkboxes-3">
      <input name="checkboxes" id="checkboxes-3" type="checkbox" value="rain">
      Rain
    </label>
    <label class="checkbox-inline" for="checkboxes-4">
      <input name="checkboxes" id="checkboxes-4" type="checkbox" value="none">
      None
    </label>
  </div>
</div>

<!-- Text input-->
<div id="blank_co" div class="form-group hide">
  <label class="col-md-4 control-label" for="blankbg">Blanks cutoff: (1-99)</label>  
  <div class="col-md-4">
  <input name="blankbg" class="form-control input-md" id="blankbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="fresh_co" div class="form-group hide">
  <label class="col-md-4 control-label" for="freshbg">Fresh water cutoff: (1-99)</label>  
  <div class="col-md-4">
  <input name="freshbg" class="form-control input-md" id="freshbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="marine_co" div class="form-group hide">
  <label class="col-md-4 control-label" for="marinebg">Marine water cutoff: (1-99)</label>  
  <div class="col-md-4">
  <input name="marinebg" class="form-control input-md" id="marinebg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<!-- Text input-->
<div id="rain_co" div class="form-group hide">
  <label class="col-md-4 control-label" for="rainbg">Rain water cutoff: (1-99)</label>  
  <div class="col-md-4">
  <input name="rainbg" class="form-control input-md" id="rainbg" required="" type="text" placeholder="" value="10">

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#checkboxes-0').change(function(){
        if(this.checked)
            $('#blank_co').fadeIn('slow');
        else
            $('#blank_co').fadeOut('slow');

    });

      $('#checkboxes-1').change(function(){
        if(this.checked)
            $('#fresh_co').fadeIn('slow');
        else
            $('#fresh_co').fadeOut('slow');

    });

      $('#checkboxes-2').change(function(){
        if(this.checked)
            $('#marine_co').fadeIn('slow');
        else
            $('#marine_co').fadeOut('slow');

    });

      $('#checkboxes-3').change(function(){
        if(this.checked)
            $('#rain_co').fadeIn('slow');
        else
            $('#rain_co').fadeOut('slow');
  });

    var $others = $('input[name="checkboxes"]').not('#checkboxes-4')
$('#checkboxes-4').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#checkboxes-4').prop('checked', false)
    }
})


});
</script>
	
	<script>

    //hide "div.hide" if "none" checked
		
		$(document).ready(function(){
    $('#checkboxes-4').change(function(){
        if(this.checked)
            $('div.hide').fadeOut('slow');
        else
            $('div.hide').fadeIn('slow');

    });
});
</script>
</body>
0 голосов
/ 14 февраля 2019

Сначала необходимо получить все элементы <div>, содержащие входные данные, а затем, когда отмечен флажок None, вы вызываете каждый <div> для постепенного исчезновения при необходимости. 

<html>
    <title>
    </title>
    <head>
    </head>
    <body>
        <!-- Multiple Checkboxes (inline) -->
        <div class="form-group">
    
    
    <label class="col-md-4 control-label" for="checkboxes">
    Select any desired backgrounds:</label>
      <div class="col-md-4">
        <label class="checkbox-inline" for="checkboxes-0">
          <input name="checkboxes" id="checkboxes-0" type="checkbox" value="blanks">
          Blanks
        </label>
        <label class="checkbox-inline" for="checkboxes-1">
          <input name="checkboxes" id="checkboxes-1" type="checkbox" value="fresh">
          Fresh Water
        </label>
        <label class="checkbox-inline" for="checkboxes-2">
          <input name="checkboxes" id="checkboxes-2" type="checkbox" value="marine">
          Marine Water
        </label>
        <label class="checkbox-inline" for="checkboxes-3">
          <input name="checkboxes" id="checkboxes-3" type="checkbox" value="rain">
          Rain
        </label>
        <label class="checkbox-inline" for="checkboxes-4">
          <input name="checkboxes" id="checkboxes-4" type="checkbox" value="none">
          None
        </label>
      </div>
    </div>
    
    <!-- Text input-->
    <div id="blank_co" div class="form-group">
      <label class="col-md-4 control-label" for="blankbg">Blanks cutoff: (1-99)</label>  
      <div class="col-md-4">
      <input name="blankbg" class="form-control input-md" id="blankbg" required="" type="text" placeholder="" value="10">
    
      </div>
    </div>
    
    <!-- Text input-->
    <div id="fresh_co" div class="form-group">
      <label class="col-md-4 control-label" for="freshbg">Fresh water cutoff: (1-99)</label>  
      <div class="col-md-4">
      <input name="freshbg" class="form-control input-md" id="freshbg" required="" type="text" placeholder="" value="10">
    
      </div>
    </div>
    
    <!-- Text input-->
    <div id="marine_co" div class="form-group">
      <label class="col-md-4 control-label" for="marinebg">Marine water cutoff: (1-99)</label>  
      <div class="col-md-4">
      <input name="marinebg" class="form-control input-md" id="marinebg" required="" type="text" placeholder="" value="10">
    
      </div>
    </div>
    
    <!-- Text input-->
    <div id="rain_co" div class="form-group">
      <label class="col-md-4 control-label" for="rainbg">Rain water cutoff: (1-99)</label>  
      <div class="col-md-4">
      <input name="rainbg" class="form-control input-md" id="rainbg" required="" type="text" placeholder="" value="10">
    
      </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#checkboxes-0').change(function(){
            if(this.checked)
                $('#blank_co').fadeIn('slow');
            else
                $('#blank_co').fadeOut('slow');
    
        });
    
          $('#checkboxes-1').change(function(){
            if(this.checked)
                $('#fresh_co').fadeIn('slow');
            else
                $('#fresh_co').fadeOut('slow');
    
        });
    
          $('#checkboxes-2').change(function(){
            if(this.checked)
                $('#marine_co').fadeIn('slow');
            else
                $('#marine_co').fadeOut('slow');
    
        });
    
          $('#checkboxes-3').change(function(){
            if(this.checked)
                $('#rain_co').fadeIn('slow');
            else
                $('#rain_co').fadeOut('slow');
      });
    
        var $others = $('input[name="checkboxes"]').not('#checkboxes-4')
        var $othersWrappers = $('div[id$="_co"]')
    $('#checkboxes-4').change(function () {
        if (this.checked) {
            $others.prop('checked', false)
            $othersWrappers.each(function( index ) {
              $(this).fadeOut('slow');
    });
        }
    });
    $others.change(function () {
        if (this.checked) {
            $('#checkboxes-4').prop('checked', false)
        }
    })
    
    
    });
    </script>
    </body>
    
    </html>
...