Show a hidden text box based on two radio buttons-CodePudding

These are the two radio buttons and hidden text box and the script I tried with jQuery but I am stuck here.

    $(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"  > 
    <label for="small"><span></span></label> 1

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

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

CodePudding user response：

The question seems to be missing some information. Therefore, I will be making some assumptions.

The first assumption is that you have different size choices such as small, medium, and large.

The second assumption is that you have different color choices such as red, green, blue, etc.

The reason for these assumptions is that you are using radio buttons instead of checkboxes.

The way radio buttons work is that the attribute id allows to identify them individually; however, the attribute name group them together.

In your case, you seem to have two groups: size and color.

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"  /> 
<label for="small">Small</label>
<input type="radio" id="medium" name="size" value="30"  /> 
<label for="medium">Medium</label>
<input type="radio" id="large" name="size" value="40"  /> 
<label for="large">Large</label>
<br/>

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

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

Now, if the question is asking to show the input when the choice green and small are selected, then radio buttons aren't the way to go. You need to use checkboxes:

// 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"  > 
<label for="small">Small</label>
<input type="checkbox" id="green" name="color" value="2"  > 
<label for="green">Green</label>
<br/>
<div id="itemdv" style="display: none"> 
  <input type="text" name="amount" id="item" >
</div>

Let me know if you have questions or if the solution you were looking was different. Have a nice day.

CodePudding user response：

First of all, you need to use the correct HTML for your radio buttons. You are passing different names to radio buttons you need to make the name attribute the same for both the buttons. Then use the given jquery code. Please look into the code snippet attached.

$(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"  > 
    <label for="small"><span></span></label> 1

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

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