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

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

jquery-ui jquery html javascript

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

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>