选中复选框时，选择下拉列表应显示不起作用

Question

基本上，我有一个复选框 如果选中该复选框，则应显示下拉列表。如果未选中，则下拉列表不应显示。不幸的是，它没有用。这是我的代码。它不是完整的代码，但足以看出错误。

<script>
$('[name="Lab Elective"]').on('change', function() {
  $('#Lab Elective g').toggle(this.checked);
}).change();
</script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab Elective g" name="Lab Elective g">
<option value="some value">some value</option>
</select>

Answer 1

ID中不能包含空格。将ID中的空格更改为其他内容，例如-。

https://jsbin.com/famaqovumo/edit?html,css,js,console,output

HTML

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab-Elective-g" name="Lab Elective g">
<option value="some value">some value</option>
</select>

CSS

.hidden {
     display:none;
}

JS

$('[name="Lab Elective"]').on('change', function() {
  $('#Lab-Elective-g').toggleClass('hidden',!$(this).is(':checked'));
}).change();

Answer 2

<script>
function show_hide_sel()
{
   if( $('input[name="Lab Elective"]').is(':checked') )
   {
     $('#Lab_Elective_g').show();
   }
   else
   {
     $('#Lab_Elective_g').hide();
   }
}


$(document).ready(function() {

  $('input[name="Lab Elective"]').on('click', function() {
    show_hide_sel();
  });

  show_hide_sel();
});
</script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value">

<select id="Lab_Elective_g" name="Lab Elective g">
<option value="some value">some value</option>

Answer 3

避免使用jQuery.toggle，并注意ID。

使用jQuery选择包含空格的ID是比较棘手的。

IGNORE INDEX (`PRIMARY`)

$(document).ready(function(){
  $('[name="Lab Elective"]').on('change', function() {
    if (this.checked) {
      $("[id='Lab Elective g']").show();
    } else {
      $("[id='Lab Elective g']").hide();
    }
  });
});

为此默认为取消选中和隐藏，请进行以下调整：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="Lab Elective" id="Lab Elective" value="some value" checked>

<select id="Lab Elective g" name="Lab Elective g">
    <option value="some value">some value</option>
</select>