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

Question

这些是两个单选按钮和隐藏的文本框以及我尝试使用的脚本 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>

Answer 1

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

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

Answer 2

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

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

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

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

单选按钮的工作方式是属性 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>

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

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

Show a hidden text box based on two radio buttons

jquery

radio-button

radio