Picking two radio buttons to show/hide divs using JavaScript

Question

I have two radio button categories that are broken down into showing/hiding different input fields. I'm inching closer to getting it but can't seem to figure it out completely.

Here are the images below:

Selecting 'Single user' and 'Live Session' works perfectly.

Selecting 'Single user' and 'Remote Session' works perfectly.

Selecting 'Team' and 'Live session' works perfectly.

When selecting 'Team' and 'Remote session' - When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes below 'Requester Name' and 'Team Name'.

Here is the code that I currently have:

 $(document).ready(function () { $('input[name=requestType]').click(function() { if(this.value == 'Team') { $(".total").show(); $(".teamname").show(); $(".one").show(); $(".two").show(); $(".three").show(); $(".four").show(); $(".five").show(); } else { $(".teams").hide(); } }); $("input[name=sessionType]").change(function(){ }); $("#totalUsers").change(function() { $('.six').hide(); $('.seven').hide(); $('.eight').hide(); $('.nine').hide(); $('.ten').hide(); var selectValue = $(this).val(); switch (selectValue) { case "six": $('.five').show(); $('.six').show(); break; case "seven": $('.five').show(); $('.six').show(); $('.seven').show(); break; case "eight": $('.five').show(); $('.six').show(); $('.seven').show(); $('.eight').show(); break; case "nine": $('.five').show(); $('.six').show(); $('.seven').show(); $('.eight').show(); $('.nine').show(); break; case "ten": $('.five').show(); $('.six').show(); $('.seven').show(); $('.eight').show(); $('.nine').show(); $('.ten').show(); break; } }); $("#submit").click(function (){ if($("#submit").hasClass("disabled")) { alert('Validation Failed'); } else { AddListItem(); return false; } }); }); function getItem() { var item = { Title: $("#requesterName").val(), TeamName: $("#teamName").val(), NumberOfAttendees: $("#totalUsers").val(), FirstName: $("#oneUser").val(), SecondName: $("#twoUsers").val(), ThirdName: $("#threeUsers").val(), FourthName: $("#fourUsers").val(), FifthName: $("#fiveUsers").val(), SixthName: $("#sixUsers").val(), SeventhName: $("#sevenUsers").val(), EighthName: $("#eightUsers").val(), NinthName: $("#nineUsers").val(), TenthName: $("#tenUsers").val(), RequestType: $("input[name=requestType]:checked").val(), SessionType: $("input[name=sessionType]:checked").val(), }; return item; } function AddListItem(resources) { var item = getItem(); if (item.RequestType == "Single User") { item.NumberOfAttendees = 'None'; } $pnp.setup({ baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/" }); $pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){ $("#submit").hide(); $(".form").hide(); $(".icon").hide(); $("#header").hide(); $("#DeltaPlaceHolderPageTitleInTitleArea").hide(); $("#hidden_div").show(); $("#cancel").hide(); }); } 

 #submit { border-radius: 4px!important; } .ext { display: none; } #DeltaPlaceHolderPageTitleInTitleArea { font-size: 3rem; } .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten { margin-bottom: 3px!important; } .form-group { margin-bottom: 5px; width: 450px; } .form { padding-top: 15px; padding-left: 0px; padding-right: 0px; } #hidden_div { padding-top: 30px; text-align: center; } h2 { font-size: 2rem!important; } .icon { float: left; margin-right: 25px; width: 150px; height: 140px; } .teams { display: none; } 

 <form id="form"> <div class="container form"> <div class="form-group row"> <label for="requestType" class="col-form-label">Request Type:</label> <label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label> <label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label> <div class="help-block with-errors"></div> </div> <div class="form-group row"> <label for="sessionType" class="col-form-label">Session Type:</label> <label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label> <label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label> <div class="help-block with-errors"></div> </div> <div class="form-group row"> <label for="requesterName" class="col-form-label">Requester Name:</label> <input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/> <div class="help-block with-errors"></div> </div> <div class="form-group row teamname teams"> <label for="teamName" class="col-form-label">Team Name:</label> <input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/> <div class="help-block with-errors"></div> </div> <div class="form-group row teams total"> <label for="totalUsers" class="col-form-label">Number of Attendees:</label> <select class="form-control" id="totalUsers"> <option value="Five" selected>5</option> <option value="Six">6</option> <option value="Seven">7</option> <option value="Eight">8</option> <option value="Nine">9</option> <option value="Ten">10</option> </select> <div class="help-block with-errors"></div> </div> <div class="form-group row one teams"> <label for="oneUser" class="col-form-label">Names of Attendees:</label> <input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/> <div class="help-block with-errors"></div> </div> <div class="form-group row two teams"> <input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row three teams"> <input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row four teams"> <input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row five teams"> <input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row six teams teams1"> <input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row seven teams teams1"> <input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row eight teams teams1"> <input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row nine teams teams1"> <input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row ten teams teams1"> <input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/> <div class="help-block with-errors"></div> </div> <div class="form-group row"> <button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button> <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button> </div> </div> </form> 

Answer 1

You can use css sibling selectors to do this without need for jQuery.

<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>

--

input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
  display: none;

}

I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo

Let me know if this doesn't work for your use case