选择两个单选按钮以使用JavaScript显示/隐藏div

Question

我有两个单选按钮类别，分为显示/隐藏不同的输入字段。我离获得它越来越近，但似乎无法完全弄清楚。

以下是图片：

选择“单个用户”和“实时会话”非常有效。

选择“单个用户”和“远程会话”非常有效。

选择“团队”和“实时会话”非常有效。

选择“团队”和“远程会话”时-当用户同时单击“团队” +“远程会话”单选按钮时，我希望能够隐藏div（.total ，.one，.two，.three，.four，.five ---> .ten）。因此，基本上是“请求者名称”和“团队名称”下面的所有输入框。

这是我当前拥有的代码：

$(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

您可以使用CSS兄弟选择器来执行此操作，而无需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;

}

我用此代码笔来说明如何：https://codepen.io/hasanainj/pen/ZMVwYo

让我知道这是否不适用于您的用例