单击两个单选框和一个按钮时显示隐藏的文本框答案

【问题标题】：Show Hidden Text Box when TWO radio boxes AND a button are clicked单击两个单选框和一个按钮时显示隐藏的文本框
【发布时间】：2022-07-01 23:49:07
【问题描述】：

这是两个单选按钮和按钮的HTML代码

<body>


    <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> 
    <label for="small"><span></span></label> 
    <div class="label">Small</div>    

    <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" > 
    <label for="green"><span></span></label> 
    <div class="label">Green</div>    

    <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>

<div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>

</body>

这是我到目前为止的脚本。我让它只使用单选按钮，但是当我添加按钮脚本时它停止工作。

<script>
const sizeSelector = 'input:radio[name=size]';
const colorSelector = 'input:radio[name=color]';
const cartSelector = 'button[name=cart]';

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

const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function toggleWhenSmallAndGreenAndCartButton(){  
  let size = $(`${sizeSelector}:checked`).val();
  let color = $(`${colorSelector}:checked`).val();
  let cart = $(`${cartSelector}:checked`).val();
  $('#itemdv').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON) && $('#itemdv2').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON);
}


</script>

我希望文本框仅在 id="small" 单选和 id="green" 单选和 id="cartbutton" 都被点击时显示。

另外，有没有办法让文本框在满足所有这些条件后保持可见，并且在进行其他选择时不再隐藏？

【问题讨论】：

标签： javascript html jquery radio-button

【解决方案1】：

用于有效性检查的代码很多

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

$(function() {

  $(`${cartSelector}`).click(() => {
    validityCheck();
  });

});

const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;

function validityCheck() {
  let $size = $(`${sizeSelector}`);
  let $color = $(`${colorSelector}`);
  
  let size_flag = $size.is(':checked');
  let color_flag = $color.is(':checked');

  $('#itemdv').toggle(size_flag && color_flag);
}

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


  <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
  <label for="small"><span></span></label>
  <div class="label">Small</div>

  <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
  <label for="green"><span></span></label>
  <div class="label">Green</div>

  <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>

  <div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>

</body>

【讨论】：

【解决方案2】：

您可以按如下方式使用disabled 属性

document.getElementById("small").addEventListener("click", function(){ document.getElementById("green").removeAttribute("disabled");});

document.getElementById("green").addEventListener("click", function(){ document.getElementById("cartbutton").removeAttribute("disabled");});

document.getElementById("cartbutton").addEventListener("click", function(){ document.getElementById("itemdv").style.display = "block";});

<body>


    <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> 
    <label for="small"><span></span></label> 
    <div class="label">Small</div>    

    <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" disabled="true" > 
    <label for="green"><span></span></label> 
    <div class="label">Green</div>    

    <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5" disabled="true">Add To Cart!</button>

<div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea" ></div>

</body>

【讨论】：