显示基于两个单选按钮的隐藏文本框答案

【问题标题】：Show a hidden text box based on two radio buttons显示基于两个单选按钮的隐藏文本框
【发布时间】：2022-07-01 23:49:21
【问题描述】：

这些是两个单选按钮和隐藏文本框以及我用 jQuery 尝试过的脚本，但我被困在这里。

    $(function () {
        $("input[name=size]" && "input[name=color]").click(function () {
            if ($("input[name=size]").is("#small") && ($("input[name=color]").is("#green") )) {
                $("#itemdv").show();
            } else {
                $("#itemdv").hide();
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="small" name="size" value="20" class="radios1" > 
    <label for="small"><span></span></label> 1

    <input type="radio" id="green" name="color" value="0" class="radios2" > 
    <label for="green"><span></span></label> 2

    <div id="itemdv" style="display: none"> <input type="text" name="amount" id="item" ></div>

【问题讨论】：

$("input[name=size]" && "input[name=color]") -> $("input[name=size],input[name=color]")
radio buttons 通过具有相同名称的多个输入来工作 - 如果您只有一个带有名称的输入，那么您将只能选择它而不能取消选择它。如果你想要两个可以单独选择的选项，你应该使用两个复选框。
从您的（极其有限的）问题（以及看起来代码应该做什么）不清楚您想要发生什么以及何时发生。看起来您希望选择 both 无线电。请澄清您要达到的目标。见How to Ask。

标签： jquery radio-button

【解决方案1】：

这个问题似乎缺少一些信息。因此，我会做一些假设。

第一个假设是您有不同的尺寸选择，例如小号、中号和大号。

第二个假设是您有不同的颜色选择，例如红色、绿色、蓝色等。

这些假设的原因是您使用的是单选按钮而不是复选框。

单选按钮的工作方式是id 属性允许单独识别它们；但是，name 属性将它们组合在一起。

在您的情况下，您似乎有两组：大小和颜色。

const sizeSelector = 'input:radio[name=size]';
const colorSelector = 'input:radio[name=color]';

$(function () {
  
  // We can add the click event to all radio buttons by concatenating
  // their selectors with commans.
  $(`${sizeSelector}, ${colorSelector}`).click(() => {    
    toggleWhenSmallAndGreen();
  });
  
});

const SMALL = 20;
const GREEN = 2;
function toggleWhenSmallAndGreen(){  
  let size = $(`${sizeSelector}:checked`).val();
  let color = $(`${colorSelector}:checked`).val();
  $('#itemdv').toggle(size == SMALL && color == GREEN);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" id="small" name="size" value="20" class="sizes" /> 
<label for="small">Small</label>
<input type="radio" id="medium" name="size" value="30" class="sizes" /> 
<label for="medium">Medium</label>
<input type="radio" id="large" name="size" value="40" class="sizes" /> 
<label for="large">Large</label>
<br/>

<input type="radio" id="red" name="color" value="0" class="colors" /> 
<label for="red">Red</label>
<input type="radio" id="blue" name="color" value="1" class="colors" /> 
<label for="blue">Blue</label>
<input type="radio" id="green" name="color" value="2" class="colors" /> 
<label for="green">Green</label>

<div id="itemdv" style="display: none"> 
  <input type="text" name="amount" id="item" >
</div>

现在，如果问题是在选择绿色和小选项时要求显示输入，那么单选按钮不是要走的路。您需要使用复选框：

// If we have only these two checkboxes, then we can use the id directly.
const sizeSelector = '#small';
const colorSelector = '#green';

$(function () {

  $(`${sizeSelector}, ${colorSelector}`).click(() => {    
    toggleWhenSmallAndGreen();
  });

});

const SMALL = 20;
const GREEN = 2;
function toggleWhenSmallAndGreen(){  
  let size = $(`${sizeSelector}`).val();
  let color = $(`${colorSelector}:checked`).val();
  $('#itemdv').toggle(size == SMALL && color == GREEN);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="small" name="size" value="20" class="radios1" > 
<label for="small">Small</label>
<input type="checkbox" id="green" name="color" value="2" class="radios2" > 
<label for="green">Green</label>
<br/>
<div id="itemdv" style="display: none"> 
  <input type="text" name="amount" id="item" >
</div>

如果您有任何问题或您正在寻找的解决方案是否不同，请告诉我。祝你有美好的一天。

【讨论】：

非常感谢您的帮助！单选按钮的第一种方式是我正在寻找的。它现在有效，但我还有一个问题。选择两个单选框后，有没有办法让文本框保持可见？
是的。如果您的单选按钮的值大于零（即：颜色的值以 1、2 等开头），您可以将切换条件更改为 $('#itemdv').toggle(size > 0 && color > 0);，这应该可以解决问题。
@nchat 别忘了投票 :)

【解决方案2】：

首先，您需要为单选按钮使用正确的 HTML。您将不同的名称传递给单选按钮，您需要使两个按钮的名称属性相同。然后使用给定的 jquery 代码。请查看随附的代码 sn-p。

$(function () {
        $("input[name=size]").click(function (e) {
        let clickedEl = e.target;
            if ($(clickedEl).attr("id") === "green") {
                $("#itemdv").show();
            } else {
                $("#itemdv").hide();
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="small" name="size" value="20" class="radios1" > 
    <label for="small"><span></span></label> 1

    <input type="radio" id="green" name="size" value="0" class="radios2" > 
    <label for="green"><span></span></label> 2

    <div id="itemdv" style="display: none"> <input type="text" name="amount" id="item" ></div>

【讨论】：