Question

我想制作一个包含select的表单。根据不同的选项，将显示不同的复选框以供进一步选择。

我曾经隐藏并显示JS代码，但它不适合用户选择所有复选框（用户可以选择球类游戏和水上游戏）。如何避免让用户选中所有复选框？

$(function() {
  $('#sort').change(function(){
    $('.sort2').hide();
    $('#' + $(this).val()).load();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form " method="post" id="s-form"> 
	<div class="form-group">
		<label for="sort">Sort</label>
            <select class="form-control" id="sort">
                <option value="ball">Ball game</option>
                <option value="water">Water game</option>
            </select>
     </div>
</form>
  
    <div class="row" id="ball" class="sort2 ball" style="display: none">
        <input type="checkbox" name="sort2" value="football" > Football
        <input type="checkbox" name="sort2" value="basketball" > Basketball
    </div>
  
    <div class="row" id="water" class="sort2 water" style="display: none">
        <input type="checkbox" name="sort2" value="swimming" checked="checked"> Swimming
        <input type="checkbox" name="sort2" value="diving" > Diving
    </div>

Answer 1

$(function() {
  $('#sort').change(function(){
    $('.sort2').hide();
    $('#' + $(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form " method="post" id="s-form"> 
	<div class="form-group">
		<label for="sort">Sort</label>
            <select class="form-control" id="sort">
                <option value="ball">Ball game</option>
                <option value="water">Water game</option>
            </select>
     </div>
</form>
  
    <div class="row sort2 ball" id="ball" style="display: none">
        <input type="checkbox" name="sort2" value="football" > Football
        <input type="checkbox" name="sort2" value="basketball" > Basketball
    </div>
  
    <div class="row sort2 water" id="water"  style="display: none">
        <input type="checkbox" name="sort2" value="swimming" checked="checked"> Swimming
        <input type="checkbox" name="sort2" value="diving" > Diving
    </div>

Answer 2

你也可以这样做：

＆＃13;

$(function() {
  $('#sort').change(function(){
    //$('.sort2').hide();
    $('select option').each(function(){
      $('#' + $(this).val()).hide();
    });
    $('#' + $(this).val()).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form " method="post" id="s-form"> 
	<div class="form-group">
		<label for="sort">Sort</label>
            <select class="form-control" id="sort">
                <option value="ball">Ball game</option>
                <option value="water">Water game</option>
            </select>
     </div>
</form>
  
    <div class="row" id="ball" class="sort2 ball" style="display: none">
        <input type="checkbox" name="sort2" value="football" > Football
        <input type="checkbox" name="sort2" value="basketball" > Basketball
    </div>
  
    <div class="row" id="water" class="sort2 water" style="display: none">
        <input type="checkbox" name="sort2" value="swimming" checked="checked"> Swimming
        <input type="checkbox" name="sort2" value="diving" > Diving
    </div>

＆＃13;

Answer 3

删除style="display: none" 来自div标签并将.load()函数替换为.show()

$(function() {
  $('.sort2').hide();
  $('#sort').change(function(){
    $('.sort2').hide();
    $('#' + $(this).val()).show();
  });
});

HTML PHP JS选择选择不同的选项以显示不同的复选框

3 个答案: