我需要有关根据复选框显示和隐藏数据的帮助

I need help showing and hiding data based on a checkbox

本文关键字：显示 隐藏 数据 帮助 复选框      更新时间：2023-09-26

好吧，所以我有一个表格。在表单中，我有很多复选框。如果有人单击该复选框。它显示框下方的字段。如果他们再次单击复选框，则会使复选框下方的字段消失，并使该字段没有值。

这是代码。我让JS运行节目并隐藏。和 HTML 调用它。

function ShowCutSewDescription() {
    var select = $('#send_item_to_cutsew');
    console.log(select)
    //select = parseInt(select);
    if (select.attr('checked', true)) {
        $('#cutsew-checked').show();
    }else {
        $('#cutsew-checked').hide();
    }
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
    <input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>

所做的

更改

► select.attr('checked', true) select.is(":checked")

► $('#send_item_to_cutsew') $('[name="send_item_to_cutsew"]')，因为没有具有该 ID 的元素。

工作演示

function ShowCutSewDescription() {
  var select = $('[name="send_item_to_cutsew"]');
  if (select.is(":checked")) {
    $('#cutsew-checked').show();
  } else {
    $('#cutsew-checked').hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
  <div class="col-md-9">
    <input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
  </div>
  <div id="cutsew-checked">
    Sample box
  </div>

我假设这是使用jQuery。如果是这样，则您输入的选择器正在查找 id 为 send_item_to_cutsew 的内容。

jQuery使用css选择器作为基础，如本页所述：https://api.jquery.com/category/selectors/

根据名称获取所需输入的正确方法如下：

var select = $('[name="send_item_to_cutsew]');

或者您可以将 id 设置为上述内容，如下所示：

<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
相关文章：