代码之家  ›  专栏  ›  技术社区  ›  code-geek

Jquery根据单选按钮选择隐藏或显示文本字段

  •  0
  • code-geek  · 技术社区  · 2 月前

    我有以下代码来显示基于单选按钮选择的文本框。然而,这行不通。如何使这段代码工作?

    我希望文本框字段显示useDockerCompose是否选择为“是”,如果选择为“否”,则隐藏。

    <tr><td>
                    <b>Docker Compose</b>
                    <a href="#" id="dcPop" rel="popover" data-content="Application deploys set to use docker compose to spin up the container" data-original-title="Use Docker Compose"><i class="icon-question-sign"></i></a>
                </td><td>               
                    <input type="radio" value="false" name="useDockerCompose" CHECKED> No &nbsp;
                    <input type="radio" value="true" name="useDockerCompose"> Yes
                </td></tr>          
                <tr class="dccommandtext" style="display:none;">
                    <td nowrap><b>Docker Compose Command</b></td>
                    <td><input type="text" class="input-xxlarge" name="dccommand"></td>
                </tr>
          
          <script src="https://code.jquery.com/jquery-3.6.0.min.js"/>
        <script type="text/javascript">
            
            
            $(document).ready(function() {
                    // Function to show/hide the Docker Compose Command input based on the selected radio button
                    function showdccommand() {
                        var selectedValue = $('input[name="useDockerCompose"]:checked').val();
                        console.log("Selected value: " + selectedValue);  // For debugging
    
                        if (selectedValue === "false") {
                            $('.dccommandtext').hide();
                        } else {
                            $('.dccommandtext').show();
                        }
                    }
    
                    // Attach the 'change' event listener to the radio buttons
                    $('input[name="useDockerCompose"]').on('change', showdccommand);
    
                    // Trigger show/hide on page load to set the initial state based on the default selected value
                    showdccommand();
                    });
                
        </script>
    1 回复  |  直到 2 月前
        1
  •  2
  •   Ray Wallace    2 月前

    将jquery自动关闭脚本标记替换为正确的打开 <script> 和关闭 </script> 标签。

    <tr>
      <td>
        <b>Docker Compose</b>
        <a href="#" id="dcPop" rel="popover" data-content="Application deploys set to use docker compose to spin up the container" data-original-title="Use Docker Compose"><i class="icon-question-sign"></i></a>
      </td>
      <td>
        <input type="radio" value="false" name="useDockerCompose" CHECKED> No &nbsp;
        <input type="radio" value="true" name="useDockerCompose"> Yes
      </td>
    </tr>
    <tr class="dccommandtext" style="display:none;">
      <td nowrap><b>Docker Compose Command</b></td>
      <td><input type="text" class="input-xxlarge" name="dccommand"></td>
    </tr>
    
    <!-- EDIT Need a closing script tag -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        // Function to show/hide the Docker Compose Command input based on the selected radio button
        function showdccommand() {
          var selectedValue = $('input[name="useDockerCompose"]:checked').val();
          console.log("Selected value: " + selectedValue); // For debugging
    
          if (selectedValue === "false") {
            $('.dccommandtext').hide();
          } else {
            $('.dccommandtext').show();
          }
        }
    
        // Attach the 'change' event listener to the radio buttons
        $('input[name="useDockerCompose"]').on('change', showdccommand);
    
        // Trigger show/hide on page load to set the initial state based on the default selected value
        showdccommand();
      });
    </script>