html script - if statement based on checkbox

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>