Question

我试图通过单击单选按钮，在以下for循环创建的以下复选框中填充一组report_id。

<div class="col"><h4 style="margin-top: 0"><strong>Application Suite</strong></h4><input type="radio" id="radio1" name="suite" value="1" onclick="CheckBoxes">>Executive CFO Suite</div>
<div class="container">

        <div class="col-md-4">
          {% if fingrouplist is not None %}
                      <h4><strong>Financial</strong/></br></br><input type="checkbox" onClick="togglerep(this)" /> Select All</h4>

                              <ul>
                              {% for app in fingrouplist %}
                              <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" >  {{ app.report_name_sc }}</li>
                              {% endfor %}
                              </ul>
          {% endif %}
        </div>

为此，我正在使用以下OnClick javascript函数，我是一个完整的初学者。我已经尝试过以下方法，但是没有运气：

function CheckBoxes(selection) {
  if (selection == 1) {
    $('#Report_Id').prop('checked', true) == '15', '16', '17', '18', '19', '22', '23', '26', '28', '29', '30', '31', '33','34', '35', '36', '39', '40', '47', '48', '50', '52', '59', '60';
  }
}

有时候report_id的列表并不总是包含每个选项，但我只想将用户设置中存在的选项包括在for循环派生的report_id中。

我还创建了一个python对象，该对象定义了报告列表，因此，如果我可以从该选项中获取它而不是键入数字列表，则可能是更好的选择。

rolebased = QvReportList.objects.filter(role_based_id__exact = '1').values('report_id', 'report_name_sc').distinct()

任何帮助我朝正确方向前进的帮助都将受到赞赏。

Answer 1

您的代码中有很多错误。首先，您应该使用()来调用一个函数，而不仅是调用它的名称，因此您需要像这样更改单选按钮：

<input type="radio" id="radio1" name="suite" value="1" onclick="CheckBoxes(this)">

然后，您将需要修改功能代码以获取选中的ckeckboxes的所有值；

function CheckBoxes(clicked) {

    // array of checkboxes to check
    var checked = [15, 16, 17, 18, 19, 22, 23, 26, 28, 29, 30, 31, 33, 34, 35, 36, 39, 40, 47, 48, 50, 52, 59, 60];

    // if the radio button is checked
    if($(clicked).is(':checked')) {

        // for each checked checkbox
        $('input[name*="report_id"]').each(function() {

            // set as checked if the value is defined in the array
            // Convert $(this).val() to Numnber() to compare against a number
            $(this).prop('checked', checked.indexOf(Number($(this).val())) >= 0);

        });

    }

}

作为旁注，如果要提交包含多个具有相同名称的复选框的表单，则应使用数组名称定义[]。您的情况将是这样（请注意在名称定义中使用方括号）：

<input type="checkbox" name="report_id[]" value ="{{app.report_id}}" >

检查我的工作片段：

function CheckBoxes(clicked) {
  
  // Array of checked values
  var checked = [1, 2, 5];
  
  // if the radio button is checked
  if($(clicked).is(':checked')) {
  
    // for each checked checkbox
    $('input[name*="report_id"]').each(function() {
    
      // set as checked if the value is defined in the array
      // Convert $(this).val() to Numnber() to compare against a number
      $(this).prop('checked', checked.indexOf(Number($(this).val())) >= 0);
    
    });
    
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" onclick="CheckBoxes(this)">
<ul>
  <li><input type="checkbox" value="1" name="report_id[]"> Value 1</li>
  <li><input type="checkbox" value="2" name="report_id[]"> Value 2</li>
  <li><input type="checkbox" value="3" name="report_id[]"> Value 3</li>
  <li><input type="checkbox" value="4" name="report_id[]"> Value 4</li>
  <li><input type="checkbox" value="5" name="report_id[]"> Value 5</li>
</ul>

希望有帮助。

使用单选按钮填充复选框列表

1 个答案: