1

我正在构建一个表单，该表单具有需要根据选中的复选框显示的条件字段。我想知道在选中复选框时如何隐藏其他表单字段。当两个复选框都被选中时，我还希望能够显示所有字段。

在下面的标记中，我添加了要呈现 html 的注释。

<form class="form-horizontal">
<fieldset>


<!-- Multiple Checkboxes -->
<div class="control-group">
  <label class="control-label">Multiple Checkboxes</label>
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Load">
      Load
    </label>
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Unload">
      Unload
    </label>
  </div>
</div>

<!-- Show when "load" is checked -->
<div class="control-group">
  <label class="control-label">Dorms</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Degraff</option>
    </select>
  </div>
</div>

<!-- Show when "load" is checked -->
<div class="control-group">
  <label class="control-label">Greek House</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Tri Delt</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div class="control-group">
  <label class="control-label">How many hops?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
      <option>Four</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div class="control-group">
  <label class="control-label">How many hours?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
    </select>
  </div>
</div>

</fieldset>
</form>
4

2 回答 2

4

我id为您的元素添加了一些属性。

HTML

<form class="form-horizontal">
<fieldset>


<!-- Multiple Checkboxes -->
<div class="control-group">
  <label class="control-label">Multiple Checkboxes</label>
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Load">
      Load
    </label>
    <label class="checkbox">
      <input type="checkbox" name="checkboxes" value="Unload">
      Unload
    </label>
  </div>
</div>

<!-- Show when "load" is checked -->
<div id="dorms" class="control-group">
  <label class="control-label">Dorms</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Degraff</option>
    </select>
  </div>
</div>

<!-- Show when "load" is checked -->
<div id="greek" class="control-group">
  <label class="control-label">Greek House</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>Tri Delt</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div id="hops" class="control-group">
  <label class="control-label">How many hops?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
      <option>Four</option>
    </select>
  </div>
</div>

<!-- Show when "unload" is checked -->
<div id="hours" class="control-group">
  <label class="control-label">How many hours?</label>
  <div class="controls">
    <select id="selectbasic" name="selectbasic" class="input-xlarge">
      <option>One</option>
      <option>Two</option>
    </select>
  </div>
</div>

</fieldset>
</form>

jQuery

$("input[value='Load']").click(function(){
    if($(this).is(":checked")){
       $("#dorms, #greek").show();
    }else{
        $("#dorms, #greek").hide();
    }
});

    $("input[value='Unload']").click(function(){
        if($(this).is(":checked")){
           $("#hops, #hours").show();
        }else{
            $("#hops, #hours").hide();
        }
    });

CSS

#greek, #dorms, #hops, #hours{
    display:none;
}

工作示例 http://jsfiddle.net/cyTLm/

于 2013-05-02T00:41:50.000 回答
3

可能这可以为您提供有关您需要的指示。你可以探索更多。我对您的 html 和使用 jquery（因为您已标记）和小 css 做了一些小改动。

看看小提琴——

.toggle()

http://jsfiddle.net/kvaYG/

jQuery

$(':checkbox[value=Load]').change(function(){
    $('.load').toggle(); //This will get triggered during the checkbox change 
//i.e when you check or unckeck the checkbox. You can use element.toggle() 
//which will show and hide based on its last appearance whether it was shown or not. 
//This is a shortcut to using .show() and .hide()
});
    $(':checkbox[value=Unload]').change(function(){
      $('.unload').toggle();
});

CSS

/*Initially hide all your sections*/
.load
{
    display:none;
}
.unload
{
    display:none;
}
于 2013-05-02T00:41:11.123 回答