时间戳

首页 > 解决方案 > 使用单选按钮填充复选框列表

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

问题描述

我试图通过单击单选按钮在以下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()

感谢任何帮助我朝着正确方向前进的帮助。

标签： javascriptpythonjquery

解决方案

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

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

然后你需要修改函数代码来获取选中的复选框的所有值；

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>

希望能帮助到你。

推荐阅读