Show/hide div if it contains/not contains radio button value text

Question

I have a weird task on my new project. I have 2 radio buttons and I have to display certain dropdown divs based on the radio button selection. So radio buttons are 2 and divs are several more but I want it to show only certain divs, depending on radio button selection. I can't assign extra classes and IDs to the divs, so it came to me to try to make a javascript to check the value of radio and see, if it is contained in the div and display only divs that contain radio value. Here is the example: EDIT: Added JS

 $(document).ready(function(){ $('input[type="radio"]').click(function(){ var inputValue = $(this).attr("value"); var text = div.innerHTML; $("Radio1").not(text).hide(); $(text).show(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>

EDIT2: I forgot it should also affect another div with class select-selected to show the first of Radio2 divs. Now that is a bit tricky.

<div class="select-selected">1. Radio1 0</div>

This is on top of div with class select-hide.

I did not manage to make it. Any ideas how to do it or where to start over?

Regards!

Answer 1

You can add a change listener to both input[radio] , then inside the listener function, you select all divs, hide them, and then loop through each one checking it's content, if it contains the radio.value inside its textContent then show it.

See below code, if it helps

 $("input[name='radio']").on("change", (ev) => { let elem = ev.target; if (elem.checked){ let divs = $(".select-hide div") let val = elem.value; divs.hide() divs.removeClass("select-selected") divs.each((i, div) => { let text = div.textContent if (text.indexOf(val) > -1){ div.style.display = "block" if (text.indexOf(val + " 0") > -1){ div.className += " select-selected"; } } }) } }) //below code is to call the change when doc starts, to let radio1 selected $("input[value='Radio1']").trigger("change")

 .select-hide div{ display: none; } .select-selected{ color: green; font-size: 20px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>

Answer 2

You can do it like this... using jquery

 $(document).ready(function(){ function xyz(){ var getval = $('label.container input[type="radio"]:checked').val(); $('.select-items>div').each(function(){ if($(this).text().indexOf(getval) > -1){ $(this).show(); } else { $(this).hide(); } }); } xyz(); $('label.container input[type="radio"]').click(function(){ xyz(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="container">Radio1 <input type="radio" checked="checked" name="radio" value="Radio1"> <span class="checkmark"></span> </label> <label class="container adult">Radio2 <input type="radio" name="radio" value="Radio2"> <span class="checkmark"></span> </label> <div class="select-items select-hide"> <div>1. Radio1 0</div> <div>1.1. Radio1 - 1</div> <div>1.2. Radio1 - 2</div> <div>1.3. Radio1 - 3</div> <div>1.4. Radio1 - 4</div> <div>1.5. Radio1 - 5</div> <div>1.5.1. Radio1 - 6</div> <div>1.5.2. Radio1 - 7</div> <div>1.5.3. Radio1 - 8 Loss</div> <div>1.5.4. Radio1 - 9</div> <div>1.6. Radio1 - 10</div> <div>1.7. Radio1 - 11</div> <div>2. Radio2 0</div> <div>2.1. Radio2 - 1</div> <div>2.2. Radio2 - 2</div> <div>2.3. Radio2 - 3</div> <div>2.4. Radio2 - 4</div> </div>