Question

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

这是代码。我有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>

Answer 1

所做的更改

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

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

工作演示

＆＃13;

function ShowCutSewDescription() {
  var select = $('[name="send_item_to_cutsew"]');
  if (select.is(":checked")) {
    $('#cutsew-checked').show();
  } else {
    $('#cutsew-checked').hide();
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

我认为这是使用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()">

我需要帮助显示和隐藏基于复选框的数据

2 个答案: