html script - if statement based on checkbox - php

Question

How do i make the depth section depends on which check box the user pick.
For example: If the user checked 1.0m for the depth interval, the depth should be a dropdown between 1.0,1.1,1.2,1.3,1.4 .
below are my current code:
<label>
Depth Interval:
</label>
<br>
<input type="checkbox" id="depth_interval1.0" name="depth_interval" onclick="onlyOne(this)" value="1.0m" />
<label for="depth_interval1.0"> 1.0m</label>
<input type="checkbox" id="depth_interval1.5" name="depth_interval" onclick="onlyOne(this)" value="1.5m" />
<label for="depth_interval1.5"> 1.5m</label>
<input type="checkbox" id="depth_interval3.0" name="depth_interval" onclick="onlyOne(this)" value="3.0m" />
<label for="depth_interval3.0"> 3.0m</label>
<input type="checkbox" id="depth_interval_cont" name="depth_interval" onclick="onlyOne(this)" value="continuos" />
<label for="depth_interval_cont"> Continuos</label><br><br>
<script>
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('depth_interval')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
</script>
<label>
Depth:
</label>
<br>
<select name="depth_from" id="depth_from">
<option value="...">...</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="...">...</option>
</select>
to
<select name="depth_to" id="depth_to">
<option value="...">...</option>
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="...">...</option>
</select>
<script>
var depth[] = 1.0,1.1,1.2,1.3,1.4
if(depth_interval=1.0)
depth_from.value&&depth_to.value = var
// something like this, i dont know much about scripts so forgive me
</script>

Answer 1

Should got a better way to do this , you can refer this to modify based on your requirement.
Can use jquery to hide and show the dropdownlist you want.
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('depth_interval');
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
// Get checkbox value
var depth = $("input[name='depth_interval']:checked").val();
// Check if depth is 1.0m
if(depth == '1.0m'){
$("#depth_from > option").each(function() {
var optionValue = this.value;
$('#depth_from [value="'+ optionValue +'"]').show();
$('#depth_to [value="'+ optionValue +'"]').show();
if(optionValue >= 1.5){
$('#depth_from [value="'+ optionValue +'"]').hide();
$('#depth_to [value="'+ optionValue +'"]').hide();
}
});
}
// Check if depth is 1.5m
if(depth == '1.5m'){
$("#depth_from > option").each(function() {
var optionValue = this.value;
$('#depth_from [value="'+ optionValue +'"]').show();
$('#depth_to [value="'+ optionValue +'"]').show();
if(optionValue < 1.5 || optionValue >= 3){
$('#depth_from [value="'+ optionValue +'"]').hide();
$('#depth_to [value="'+ optionValue +'"]').hide();
}
});
}
// Check if depth is 3.0m
if(depth == '3.0m'){
$("#depth_from > option").each(function() {
var optionValue = this.value;
$('#depth_from [value="'+ optionValue +'"]').show();
$('#depth_to [value="'+ optionValue +'"]').show();
if(optionValue < 3.0){
$('#depth_from [value="'+ optionValue +'"]').hide();
$('#depth_to [value="'+ optionValue +'"]').hide();
}
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="depth_interval1.0" name="depth_interval" onclick="onlyOne(this)" value="1.0m" />
<label for="depth_interval1.0"> 1.0m</label>
<input type="checkbox" id="depth_interval1.5" name="depth_interval" onclick="onlyOne(this)" value="1.5m" />
<label for="depth_interval1.5"> 1.5m</label>
<input type="checkbox" id="depth_interval3.0" name="depth_interval" onclick="onlyOne(this)" value="3.0m" />
<label for="depth_interval3.0"> 3.0m</label>
<br>
<select name="depth_from" id="depth_from">
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="1.5">1.5</option>
<option value="3.0">3.0</option>
</select>
to
<select name="depth_to" id="depth_to">
<option value="1.0">1.0</option>
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
<option value="1.5">1.5</option>
<option value="3.0">3.0</option>
</select>