Question

是否可以同时定位两个单选按钮？

我有两组单选按钮，我想根据组合选择隐藏输入字段。

我希望能够选择“团队”单选按钮和“远程会话”按钮并隐藏/显示输入字段

以下是图像：

正确：

错误：

代码如下：

$(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();
		}
	});

<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 requester req">
	  <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

使用函数onclick #remoteSession，然后检查Team是否为checked，如果需要，则hide/show ...

$(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]').click(function() {

  if($('input[name=requestType]:checked').val()=='Team' && $('input[name=sessionType]:checked').val()=='Remote Session')
  {
  	$(".teams").hide();
    $(".teamname").show();
    
  }
else 
$('input[name=requestType]').click();
  });
  	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 requester req">
	  <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>
 Run code snippet

根据双选按钮的显示/隐藏输入字段

1 个答案: