Radio Button Show/Hide Content

Radio button show/hide content

Place label tags after both in the input tags. Like below

<input type=radio id="show" name="group">
<input checked type=radio id="hide" name="group">
<label id="id1" for="show"><span id="id1">show</span></label>
<label id="id2" for="hide"><span id="id2">hide</span></label> 
<span id="content">Content</span>

Add these css rules to existing rules

input#show:checked ~ label#id1{
  display:none;
}
input#show:checked ~ label#id2{
   display:block;
}

input#hide:checked ~ label#id2{
   display:none;
}
input#hide:checked ~ label#id1{
   display:block;
}

demo http://jsfiddle.net/vtfqW/1/

show and hide divs based on radio button click

You're on the right track, but you forgot two things:

add the desc classes to your description divs
You have numeric values for the input but text for the id.

I have fixed the above and also added a line to initially hide() the third description div.

Check it out in action - http://jsfiddle.net/VgAgu/3/

HTML

<div id="myRadioGroup">
    2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
    3 Cars<input type="radio" name="cars" value="3" />

    <div id="Cars2" class="desc">
        2 Cars Selected
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        3 Cars
    </div>
</div>

JQuery

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});

Radio button show/hide won't hide on other radio button clicks

Selecting a different radio option will not trigger the change event of rtd3. Instead, attach an event to all of the radio buttons that checks if the "certain" section should be hidden or shown.

const toggleCertainForm = () => {
  const formWrapper = document.getElementById('form-wrapper-certain');
  const rtd3 = document.getElementById('rtd3');
  formWrapper.style.display = rtd3.checked ? '' : 'none';
}

document.querySelectorAll('[name="rtd[checked]"]').forEach(r => 
  r.addEventListener('change', toggleCertainForm)
);

const toggleCertainForm = () => {  const formWrapper = document.getElementById('form-wrapper-certain');  const rtd3 = document.getElementById('rtd3');  formWrapper.style.display = rtd3.checked ? '' : 'none';}
document.querySelectorAll('[name="rtd[checked]"]').forEach(r =>   r.addEventListener('change', toggleCertainForm));

<div class="custom-control custom-radio mt-3">        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd1" value="1" required>        <label class="custom-control-label" for="rtd1"><i>None</i> of the personal information we have collected from you.</label>    </div>    <div class="custom-control custom-radio mt-3">        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd2" value="2" required>        <label class="custom-control-label" for="rtd2"><i>All</i> of the personal information we have collected from you (subject to permitted exceptions).</label>    </div>    <div class="custom-control custom-radio mt-3">        <input type="radio" name="rtd[checked]" class="custom-control-input" id="rtd3" value="3" required>        <label class="custom-control-label" for="rtd3"><i>Certain</i> (but not all) personal information we have collected from you.</label>        <div class="invalid-feedback">            Select what information you would like deleted.        </div>    </div>    <div id='form-wrapper-certain' style="display:none">        <div class="row mt-3">            <div class="col-sm-1"></div>            <div class="col-sm-11">                <i>You must specify the personal information you would like us to delete:</i>            </div>        </div>        <div class="row mt-3">            <div class="col-sm-1"></div>            <div class="col-sm-11">                <div class="custom-control custom-switch">                    <input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][transaction]">                    <label class="custom-control-label" for="rtd3Transaction">My transaction data</label>                </div>            </div>        </div>        <div class="row mt-3">            <div class="col-sm-1"></div>            <div class="col-sm-11">                <div class="custom-control custom-switch">                    <input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][device]">                    <label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>                </div>            </div>        </div>        <div class="row mt-3">            <div class="col-sm-2"></div>            <div class="col-sm-10">                <div class="custom-control custom-switch">                    <input type="checkbox" class="custom-control-input" id="rtdConfirm" name="rtd[confirm]">                    <label class="custom-control-label" for="rtdConfirm">I confirm that I would like not to sell your personal information to third parties.</label>                </div>            </div>        </div>    </div>

Show / Hide a div depending on radio button selection

First, one question... Why are you using one form for each question? If there's no reason for that, you better put one form and change the "name" value of each set of radio buttons. First, I've cleaned out your HTML a little bit...

<form id="questions">
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question three...</p>
    <input name="thirdq" type="radio" data-weight="1" />Yes
    <input name="thirdq" type="radio" data-weight="-1" />No
    <input name="thirdq" type="radio" data-weight="0" />Unsure
</form>

<div id="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
<div id="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
<div id="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>

One posible solution for your problem is to set one specific weight to each response, so when all questions are answered, you can sum the results and know if all are Yes, all No or a mix. You could set the weight using the "value" attribute of the radio button, but I prefer to create an independent data field, so you can use "value" for some info sended to with the form.

So here you have a posible way to do it...

$(document).ready(function() {

  $('input[type="radio"]').click(function() {

    var nQuestions = $('p.question-title').length;
    var $checkedItems = $('input[type="radio"]:checked');

    if($checkedItems.length == nQuestions) {  // All answered

      var sum = 0;
      $checkedItems.each(function() {
          sum += Number($(this).data('weight'));
      });

      $('div.result').hide();
      if(sum == nQuestions)
        $('div#show-me-1').show();
      else if(sum == -nQuestions)
        $('div#show-me-3').show();
      else
        $('div#show-me-2').show();
    }
  });
});

I'm assuming each question is always going to have a "p" title, and as you can see, I'm using that title to know the number of questions. You can adapt that if you need it.

Here you have the working fiddle: https://fiddle.jshell.net/rigobauer/m9xnng2e/

EDITED:

Apparently you need this behaviour with different groups of questions inside of your form. Here you have the "extended" version:

<form id="questions">

<fieldset>
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question three...</p>
    <input name="thirdq" type="radio" data-weight="1" />Yes
    <input name="thirdq" type="radio" data-weight="-1" />No
    <input name="thirdq" type="radio" data-weight="0" />Unsure

    <div class="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
    <div class="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
    <div class="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>
</fieldset>

<fieldset>
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <div class="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
    <div class="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
    <div class="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>
</fieldset>

</form>

IMPORTANT: Notice that now the show divs have "class", instead of "id". You shouldn't have the same "id" in different elements!!

And then just a few changes in the Javascript/jQuery...

$(document).ready(function() {

  $('input[type="radio"]').click(function() {

    var $thisFieldset = $(this).closest('fieldset');
    var nQuestions = $thisFieldset.find('p.question-title').length;
    var $checkedItems = $thisFieldset.find('input[type="radio"]:checked');

    if($checkedItems.length == nQuestions) {  // All answered

      var sum = 0;
      $checkedItems.each(function() {
          sum += Number($(this).data('weight'));
      });

      $thisFieldset.find('div.result').hide();
      if(sum == nQuestions)
        $thisFieldset.find('div.show-me-1').show();
      else if(sum == -nQuestions)
        $thisFieldset.find('div.show-me-3').show();
      else
        $thisFieldset.find('div.show-me-2').show();
    }
  });
});

I hope it helps

how to hide or show an element depending on radio button state?

Here is another simple implementation. By default the the select is hidden (using css). Then Use change event for radio and simply check the value of
$("#internal") is checked and decide to show of hide

$(document).ready(function () {
     $("input[name=type]").change(function(){

        if($("#internal").is(':checked')){
            $("#company_select").show();
        }else{
            $("#company_select").hide();
        }
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
     <p>Type:</p>
     <input  name="type" type="radio" id="internal" value="internal" style="vertical-align:middle; cursor: pointer;">
     <label for="internal">internal</label><br>
     <input  name="type" type="radio" id="global" value="global"  style="vertical-align:middle; cursor: pointer;" checked>
     <label for="global">global</label>
                                                
</div>
<div class="form-group" id="company_select" style="display:none">
                                                
     <label for="company"> Company </label>
     <select class="form-control" id="company" name="company" >
         <option  value="company_id.1">company1</option>
         <option  value="company_id.2">company2</option>
     </select> 
                                                     
</div>

Toggle show/hide based on multiple radio buttons

There are several issues with the code. The first step to simplifying things is to use the same logic for every change:

$('input').change(() => {  const first = $('input[name=FirstSelector]:checked').val();  const second = $('input[name=SecondSelector]:checked').val();  $("div[name=1]").toggle(first === "1");  $("div[name=2]").toggle(first === "2");  $("div[name=1A]").toggle(first === "1" && second === "A");  $("div[name=1B]").toggle(first === "1" && second === "B");  $("div[name=2A]").toggle(first === "2" && second === "A");  $("div[name=2B]").toggle(first === "2" && second === "B");});

.hide {  display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>First choice</p><input type="radio" name="FirstSelector" value="1">Option 1<input type="radio" name="FirstSelector" value="2">Option 2

<p>Second choice</p><input type="radio" name="SecondSelector" value="A">Option A<input type="radio" name="SecondSelector" value="B">Option B
<div name="1" class="hide">This is the result of just Option 1</div>
<div name="2" class="hide">This is the result of just Option 2</div>
<div name="1A" class="hide">This is the result of 1 and A</div>
<div name="1B" class="hide">This is the result of 1 and B</div>
<div name="2A" class="hide">This is the result of 2 and A</div>
<div name="2B" class="hide">This is the result of 2 and B</div>

show hide text box based on selection of radio button

I got the solution. I just need to create 2 div. 1 div has 1 text box and another div is 2 text box. And just make show/hide control for these 2 div.Thanks

How to hide/show div on radio button change

Remove the style tag from your columns and use a single div tag and put all inputs in side that. then use the code to hide the div.

<div id="postal" style="display: none;" >   
    <div class="row" >
        <div class="col-3">
        <label class="control-label" for="postalstate"><b>Postal: State</b></label>
        </div>
        <div class="col-3">
            <select class="form-control" style="width:300px" id="state" name="state">
            <option value="0">Select Postal State</option>
            <option value="1">QLD</option>
            <option value="2">NSW</option>
            <option value="3">VIC</option>
            <option value="4">TAS</option>
            <option value="5">ACT</option>
            <option value="6">WA</option>
            <option value="7">SA</option>
            <option value="8">NT</option>
            </select>
        </div>
        <div class="col-3">
        <label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>  
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
        </div>
    </div>

    <br><br>

    <div class="row" id="postaltwo">      
        <div class="col-3">
        <label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
        </div>
    </div>
</div>

use less javascript code.

function getValue(radio) {
    if ((radio.value) == 1) {
        document.getElementById("postal").style.display = "none";
    } else {
        document.getElementById("postal").style.display = "block";
    }
}

Hide and show element based on radio button selection?

The issue here is you are setting value as "true" and "false" as string type. So, in ngIf the string is not empty. Hence, it is getting shown always. Use binding syntax like below:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="form-group col-md-6">
  <div class="d-flex mb-2">
    <div>Do you have massage certificate ?</div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
    </div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="false" >
            No
            <span class="form-check-sign"></span>
            </label>
    </div>
  </div>
  <div *ngIf="has_cert">
    <input type="file" class="form-control-file custom" id="cv">
  </div>
</div>

Radio Button Show/Hide Content