Forgive me for any bad habbits, I've been playing with html and jquery for all of 48 hours.
I am attempting to mask/unmask input fields based on which checkboxes are checked. And then hide all of the fields if the "None" box is checked.
I am having issues with the code below showing the input fields until the boxes have been checked/unchecked one time. Then they begin behaving like they should. I also have the "None" box working by unchecking the other boxes, but that doesn't trigger the fields to hide like I was hoping.
Any suggestions?
TLDR: DIV fields shouldn't be seen until corresponding box is checked. All DIV fields should dissapear if "None" box is checked.
<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')
$('#checkboxes-4').change(function () {
if (this.checked) {
$others.prop('checked', false)
}
});
$others.change(function () {
if (this.checked) {
$('#checkboxes-4').prop('checked', false)
}
})
});
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire