用于显示/隐藏表单元素的 JQuery 代码答案

【问题标题】：JQuery code to show/hide form elements用于显示/隐藏表单元素的 JQuery 代码
【发布时间】：2013-11-22 17:48:05
【问题描述】：

我有一个包含 3 行复选框的表单。当且仅当仅在第一行中选中第三个复选框时，我才希望后两行可用。截至目前，我一直在显示所有三行，所以很可能我没有正确调用 JQuery。

此外，如果表格在隐藏/显示时自动缩放以考虑行的丢失/增加，那就太好了。这会自动发生吗（如果有影响，我正在使用 Bootstrap）。

代码如下：

JQuery

<body>
  <script>
    $(function showHide() {
        $("name=checkboxes").click(function() {
            if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) {
                $('#group2').hide();
                $('#group3').hide();
            }
        });
    });
  </script>
</body>

HTML

      <form class="form-horizontal">
        <fieldset>
          <!-- Form Name -->
          <legend>Select Entities to Search For</legend>
          <!-- Multiple Checkboxes (inline) -->
          <div class="form-group" id="group1">
            <label class="col-md-4 control-label" for="checkboxes">Table(s)</label>
            <div class="col-md-4">
              <label class="checkbox-inline" for="checkboxes-0">
                <input type="checkbox" name="checkboxes" id="checkboxes-farms" value="1">
                  Farms
              </label>
              <label class="checkbox-inline" for="checkboxes-1">
                <input type="checkbox" name="checkboxes" id="checkboxes-fields" value="3">
                  Fields
              </label>
              <label class="checkbox-inline" for="checkboxes-2">
                <input type="checkbox" name="checkboxes" id="checkboxes-cropzones" value="5">
                  Cropzones
              </label>
            </div>
          </div>
          <!-- Multiple Radios (inline) -->
          <div class="form-group" id="group2">
            <label class="col-md-4 control-label" for="checkboxes">Cropyear</label>
            <div class="col-md-4"> 
              <label class="checkbox-inline" for="checkboxess-0">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-cropyear" value="2014">
                  2014
              </label>
            </div>
          </div>
          <!-- Multiple Checkboxes (inline) -->
          <div class="form-group" id="group3">
            <label class="col-md-4 control-label" for="checkboxes">Crop</label>
            <div class="col-md-4">
              <label class="checkbox-inline" for="checkboxes-0">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-corn" value="100">
                  Corn
              </label>
              <label class="checkbox-inline" for="checkboxes-1">
                <input type="checkbox" name="checkboxes-lower" id="checkboxes-soybeans" value="200">
                  Soybeans
              </label>
            </div>
          </div>
        </fieldset>
      </form>

【问题讨论】：

你能做jsbin.com的演示吗？
function showHide().. 你没有在任何地方调用过这个函数
$("name=checkboxes") whatttt???????????? :D
修复了一些错误。我希望你能从这里得到它jsfiddle.net/aamir/P4KKd :) 提示。始终在控制台中查找错误。看看fixingthesejquery.com/#slide1 ;)

标签： jquery html forms twitter-bootstrap

【解决方案1】：

试试：

$(document).ready(function(){
    $("input[name='checkboxes']").change(function () {
        if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) {
            $('#group2,#group3').show();
        } else {
            $('#group2,#group3').hide();
        }
    });
});

Fiddle here.

【讨论】：

在小提琴中效果很好，但在 html 本身中却不行，我只是通过将您的答案粘贴在 <script></script> 标签中而错误地调用了该函数吗？顺便说一句，+1
谢谢 :) 写在ready 函数下。喜欢$(document).ready(function(){$("input[name='checkboxes']").change........});

【解决方案2】：

$(function() {
    $('[name="checkboxes"]').on('change', function() {
        var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked');
        $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked));
    }).trigger('change');
});

FIDDLE

【讨论】：

对不起，如果不是更清楚，但如果选中第三个复选框和其他两个复选框，则后两行不可用

【解决方案3】：

您最初需要隐藏它们 - 建议在 jquery 文档就绪功能中执行此操作，例如：

$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});

我会在控制附加字段显示的复选框上附加一个“更改”事件。

如果您需要在 jsfiddle 或类似内容上一起弹出的示例，请告诉我。

【讨论】：