隐藏如果未选中框，则显示是否选中框并且下拉值等于“其他”

Question

因此，从下拉菜单中选择“其他”会为您提供一个文本框。取消选中该框将隐藏文本框和下拉菜单。

我无法直接编辑html来添加div以将下拉菜单和文本框一起包装。

我遇到的问题是即使没有选择其他，如果取消选中该框，然后检查它将显示其他文本框。如果选择了其他下拉项，我只希望显示其他文本框。

非常感谢任何帮助：）

// hide otherBox
$('#otherBox').hide();

// show OtherBox if other selected
$('#location_dropdown').change(function() {
    $('#otherBox').toggle(this.value == 'Other');
  });
  
   $('#honor').change(function () {

   
        if (!this.checked) {
           $('#location_dropdown').hide();
           $('.form label').hide();
             } else {
            $('#location_dropdown').show();
            $('.form label').show();
            $('#otherBox').show();
}
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>

<div class="form">


  <label for="location_dropdown"> Location: </label>


</div>

<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
  <option value="Chicago Center">Chicago Center</option>
  <option value="Columbia">Columbia</option>
  <option value="Lower Manhattan">Lower Manhattan Hospital</option>
  <option  value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

Answer 1

删除$('#otherBox').show();，并添加以下评论的两行代码：

$('#honor').change(function() {
  if (!this.checked) {
    $('#location_dropdown').hide();
    $('.form label').hide();
    $('#otherBox').hide(); //ADD THIS
  } else {
    $('#location_dropdown').show();
    $('.form label').show();
    $('#otherBox').toggle($('#location_dropdown').val() === 'Other');  //ADD THIS
  }
});

<强>段：

＆＃13;

＆＃13;

// hide otherBox
$('#otherBox').hide();

// show OtherBox if other selected
$('#location_dropdown').change(function() {
  $('#otherBox').toggle(this.value == 'Other');
});

$('#honor').change(function() {
  if (!this.checked) {
    $('#location_dropdown').hide();
    $('.form label').hide();
    $('#otherBox').hide();
  } else {
    $('#location_dropdown').show();
    $('.form label').show();
    $('#otherBox').toggle($('#location_dropdown').val() === 'Other');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>

<div class="form">


  <label for="location_dropdown"> Location: </label>


</div>

<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
  <option value="Chicago Center">Chicago Center</option>
  <option value="Columbia">Columbia</option>
  <option value="Lower Manhattan">Lower Manhattan Hospital</option>
  <option  value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

＆＃13;

＆＃13;

＆＃13;