Question

我已经研究了各种示例和选项，并设法让自己感到困惑，想知道是否有人可以提供帮助？。

我从表中拉出了几行，该行中有一个单选按钮和一个id（动态），我不知道，因为这是用0或1连接以显示和隐藏的行。单选按钮下方是每个选项的附加信息字段，它们与以后的单选按钮的ID相匹配。用户可以在这些框中输入一些文本。选中这些字段后，想法是使它们可见以添加信息的框，而未选中则隐藏。选中的框工作正常，所有选定的行都显示一个勾号。我正在使用相同的表单来创建和编辑条目。

当用户选择一个选项并将其保存时，在编辑页面上，页面会加载并选中该复选框，但我需要该复选框的ID才能显示或隐藏其下方的行。因为我不知道这些id，所以我无法让jQuery抓住它，因为它们会发生变化并且是动态的。

我想做的是在页面加载中，抓住选中的复选框ID，然后我可以使用它们来显示或隐藏下面的文本框。

有人对我能做到这一点有任何想法吗？

在此先多谢，并很抱歉最初含糊不清。

相关代码是...

<div class="form-group">
          <label for="exampleInputEmail1">Here are your work experience placements</label>
        <div class="row"><!--Start of row -->
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th scope="col">Business name</th>
                      <th scope="col">Address</th>
                      <th scope="col">Dates</th>
                      <th scope="col">Include on CV</th>
                      <th scope="col">Exclude from CV</th>
                    </tr>
                  </thead>
                  <tbody>
                                              <tr>
                          <td>Bolton College</td>
                          <td>Deane Road, Bolton, BL3 5BG </td>
                          <td>18/05/2018 to 18/05/2018</td>
                          <td><input type="radio" name="placement_id_0" id="we_check_13_1" value="13_1" onclick=" checkInclude(this.id);" checked/>

                          <td><input type="radio" name="placement_id_0" id="we_uncheck_13_0" onclick=" checkInclude(this.id);" value="13_0"/></td>
                        </tr>
                                        </tbody>
                </table>
            </div>  
          </div>
      </div> <!--End of row -->


      <!--Work experience descriptins start here -->
      <div class="row"><!--Start of row -->
          <div class="col-md-12">
          <h3>Work experience descriptions</h3>
          <p class="lead">Please complete the brief descriptions of your roles at each of your work experience placements</p>
          <hr/>

          <div id='we_div_13'>
            <p>What did you do at Bolton College between 18/05/2018 and 18/05/2018?</p>
            <div class="form-group">
                <textarea class="form-control" rows="10" id='description_13' name="we_desc_13" value="251" placeholder="Please detail your role and describe specifically what you did whilst on placement at Bolton College during that time period"></textarea>
            </div>
          </div>

            </div>
    </div>

Answer 1

表渲染完成后，尝试运行此功能：

// Get all input box elements
var boxes = $("input[type='checkbox']");
// Loop through each input box
$.each( boxes, function( key, value ) {
    // Check if the input box is checked
    if ($(this).prop('checked')) {
        // Input box is checked - Add anything you want to happen in the clause below
        var boxid = $(this).attr('id')
        console.log(boxid + ' is checked');
    } else {
        // Input box is not checked - Add anything you want to happen in the clause below
        var boxid = $(this).attr('id')
        console.log(boxid + ' is not checked');
    }
});

另一方面，执行此操作的第二种方法是在带数据时添加条件，使功能服务器端通过以下条件：如果下表的表列或对象包含数据或为空，则执行某项操作；上面的JS将在客户端识别所有选中和未选中的项目，我想你的问题是如何识别是否选中了一个框；这应该很容易做到。

获取页面加载时选中的复选框的ID

1 个答案: