顯示基于兩個單選按鈕的隱藏文本框

這些是兩個單選按鈕和隱藏的文本框以及我用 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>

uj5u.com熱心網友回復：

這個問題似乎缺少一些資訊。因此，我會做一些假設。

第一個假設是您有不同的尺寸選擇，例如小號、中號和大號。

第二個假設是您有不同的顏色選擇，例如紅色、綠色、藍色等。

這些假設的原因是您使用的是單選按鈕而不是復選框。

單選按鈕的作業方式是該屬性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>

如果您有任何問題，或者您正在尋找的解決方案是否不同，請告訴我。祝你今天過得愉快。

uj5u.com熱心網友回復：

首先，您需要為單選按鈕使用正確的 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>

標籤：jQuery 单选按钮 收音机

上一篇：HTML和JavaScript。嘗試定位來自相鄰錨點的文本輸入

下一篇：處理網格列值中的貨幣格式