php html脚本-基于复选框的if语句

lnlaulya 于 2023-01-08 发布在 PHP

关注(0)|答案(1)|浏览(150)

如何创建深度部分取决于用户选择的复选框。例如：如果用户选择1.0m作为深度间隔，则深度应为1.0、1.1、1.2、1.3、1.4之间的下拉列表。
下面是我目前的代码：

<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>

php

来源：https://stackoverflow.com/questions/75013656/html-script-if-statement-based-on-checkbox

1条答案

按热度按时间

iyfjxgzm1#

如果有更好的方法来做到这一点，你可以参考这一修改的基础上您的要求。
可以使用jquery来隐藏和显示你想要的下拉列表。

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>

赞(0）回复(0）举报 2023-01-08

我来回答

php html脚本-基于复选框的if语句

1条答案

相关问题

热门标签

最新问答