基於雙選按鈕顯示/隱藏輸入字段

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