使用jquery ajax获取Rails check\u box\u标记中复选框的值

我有这张表格 表单的代码如下所示：

.form-group.form-item.row
   = hidden_field_tag "test_method_id", @test_method.id, id: 'test_method_id'
   .col-sm-3
     %label Signature Title
      = text_field_tag 'signature_title', nil, class: 'form-control', placeholder: 'Enter Signature Title'
   .col-sm-3
     %label Add Required Certificate Types
      = collection_select :signature_requirement, :certificate_ids, @certificates, :id, :name, { selected: @test_method.certificate_ids, include_blank: "Select Certificate Type" }, { class: "form-control select2 multi-select2", multiple: "multiple" }

   .col-sm-2
     %label.small Mandatory Signature
     .form-check.mt-2.text-center
       = check_box_tag 'mandatory', 'mandatory', false, class: 'form-check-input'
   .col-sm-2
     %label.small Show Signature in Report
     .form-check.mt-2.text-center
       = check_box_tag 'include_in_report', 'include_in_report', false, class: 'form-check-input'
   .col-sm-2
     .icon.text-center
       %i#create-signature-requirement-btn.fa.fa-plus-circle.add-icon

主要关注的是复选框，我想把这个值发送给rails，但是它们没有传递给params，我不知道为什么

阅读一些答案和文档，但我找不到正确的解决方案

如何获取要传递给rails的复选框的值，取消选中复选框（在ajax成功时），然后在附加到表中时将其选中

下面是获取当前附加到表中的title和certificates类型值的代码

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds
        }
      },
      success: function(data) {
        console.log(data);
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
      }
    });
  });

这是

appendSignatureRequest（）

函数的代码：

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}

这是表格的代码，显示以下值：

    .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}

---

请尝试下面的代码获取复选框值

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();
    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    let mandatory = $("input[name='mandatory']:checked") ? 1 : 0;

    let include_in_report= $("input[name='include_in_report']:checked") ? 1 : 0;

    $.ajax({
    url:
            '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
            dataType: 'json',
            method: 'POST',
            data: {
            signature_requirement: {
            signature_title: signatureTitle,
                    certificate_ids: certificateIds,
                    mandatory: mandatory,
                    include_in_report: include_in_report,
            }
            },
            success: function(data) {
            console.log(data);
            appendSignatureRequirement(data);
            $('#signature_title').val('');
            $('#signature_requirement_certificate_ids')
                    .val(null)
                    .trigger('change');
            }
    });
    });

---

我能解决这个问题。谢谢你让我开始

这是全面实施：

从多选框中提取文本，并从map函数生成的数组中删除逗号 Rails视图中的表 实施后的图像

---

感谢您的回答，在rails中传递并创建了值后，这应该会起作用，对吗？但目前该值甚至没有被传递-请参阅我的问题

如何获得要传递的复选框的值，取消选中复选框，然后在附加到表中时将其选中？

您的答案仅回答此问题-

在附加到表中时将其选中

前两个如何？@mayorsan或者您的复选框值是否保存在DB中。尚未保存。这就是当前选中复选框时控制台的外观。请检查我的<代码>复选框标记的代码<代码>签名要求创建（40.9ms）插入“签名要求”（“签名标题”、“测试方法id”、“创建日期”、“更新日期”）值（$1、$2、$3、$4）返回“id”[“签名标题”、“测试”]、[“测试方法id”，1]，“创建日期”、“2018-10-21 10:32:32.612779”[“更新日期”，“2018-10-21 10:32:32.612779”]

证书签名要求创建（1.8ms）插入“证书签名要求”（“证书id”，“签名要求id”）值（$1，$2）[“证书id”，1]，“签名要求id”，33]]

我已经更新了参数，请检查。签名要求：{signature\u title:signatureTitle，certificate\u ID:CertificateID，强制：强制，包含在报告中：包含在报告中，}

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();
    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();

    let mandatory = $("input[name='mandatory']:checked") ? 1 : 0;

    let include_in_report= $("input[name='include_in_report']:checked") ? 1 : 0;

    $.ajax({
    url:
            '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
            dataType: 'json',
            method: 'POST',
            data: {
            signature_requirement: {
            signature_title: signatureTitle,
                    certificate_ids: certificateIds,
                    mandatory: mandatory,
                    include_in_report: include_in_report,
            }
            },
            success: function(data) {
            console.log(data);
            appendSignatureRequirement(data);
            $('#signature_title').val('');
            $('#signature_requirement_certificate_ids')
                    .val(null)
                    .trigger('change');
            }
    });
    });

function extractTextFromMultiSelect(record) {
  if (record.length === 0) {
    return '';
  } else {
    let texts = $.map(record, function(obj) {
      span =
        '<span class="badge badge-pill badge-primary">' + obj.text + '</span>';
      return span;
    });
    return texts.join(' ');
  }
}

function extractMandatoryCheckbox() {
  let mandatory = $('input[name="mandatory"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${mandatory}>
    </div>`;
}

function extractShowInReportCheckbox() {
  let include_in_report = $('input[name="include_in_report"]').prop('checked')
    ? 'checked'
    : null;
  return `<div class="form-check text-center">
    <input type="checkbox" class="form-check-input mb-4" ${include_in_report}>
    </div>`;
}

function appendSignatureRequirement(record) {
  row = $('#signature_requirement_' + record['id']);
  texts = $('#signature_requirement_certificate_ids').select2('data');
  var html =
    '<td>' +
    non_null(record['signature_title']) +
    '</td>' +
    '<td>' +
    extractTextFromMultiSelect(texts) +
    '</td>' +
    '<td>' +
    extractMandatoryCheckbox() +
    '</td>' +
    '<td>' +
    extractShowInReportCheckbox() +
    '</td>' +
    '<td>' +
    "<a class='mr-2' href='javascript:editSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-pencil text-secondary' aria-hidden='true' data-toggle='tooltip' title='Edit'></i>" +
    '</a>' +
    "<a href='javascript:deleteSignatureRequirement(" +
    record['id'] +
    ")'>" +
    "<i class='fa fa-trash text-danger' aria-hidden='true' data-toggle='tooltip' title='Delete'></i>" +
    '</a>' +
    '</td>';
  if (!row.length) {
    row = $('#signature_requirements').append(
      "<tr id='signature_requirement_" + record['id'] + "'>" + html + '</tr>'
    );
  } else {
    row.empty();
    row.append(html);
  }
}

$('#create-signature-requirement-btn').on('click', function(event) {
    event.preventDefault();

    let testMethodId = $('#test_method_id').val();
    let signatureTitle = $('#signature_title').val();
    let certificateIds = $('#signature_requirement_certificate_ids').val();
    let mandatory = $('input[name="mandatory"]').prop('checked') ? 1 : 0;
    let include_in_report = $('input[name="include_in_report"]').prop('checked')
      ? 1
      : 0;

    $.ajax({
      url:
        '/settings/test_methods/' + testMethodId + '/add_signature_requirement',
      dataType: 'json',
      method: 'POST',
      data: {
        signature_requirement: {
          signature_title: signatureTitle,
          certificate_ids: certificateIds,
          mandatory: mandatory,
          include_in_report: include_in_report
        }
      },
      success: function(data) {
        appendSignatureRequirement(data);
        $('#signature_title').val('');
        $('#signature_requirement_certificate_ids')
          .val(null)
          .trigger('change');
        // uncheck upon success
        $('#mandatory').prop('checked', false);
        $('#include_in_report').prop('checked', false);
      }
    });
  });

   .col-sm-10
      .table-responsive.mt-5
        %table.table.table-hover.table-valign-middle
          %thead
            %tr
              %th Title
              %th Certificate Types
              %th Mandatory
              %th Show in Report
              %th Actions
          %tbody#signature_requirements
            - @test_method.signature_requirements.each do |signature_requirement|
              %tr{:id => "signature_requirement_#{signature_requirement.id}"}
                %td
                  = signature_requirement.signature_title
                %td
                  - signature_requirement.certificates.each do |certificate|
                    %span.badge.badge-pill.badge-primary
                      = certificate.name
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'mandatory', nil, signature_requirement.mandatory == 1, class: 'form-check-input'
                %td
                  .form-check.text-center.mb-4
                    = check_box_tag 'include_in_report', nil, signature_requirement.include_in_report == 1, class: 'form-check-input'
                %td
                  %a.mr-2{:href => "javascript:editSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-pencil.text-secondary{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Edit"}
                  %a{:href => "javascript:deleteSignatureRequirement(#{signature_requirement.id})"}
                    %i.fa.fa-trash.text-danger{"aria-hidden" => "true", "data-toggle"=>"tooltip", "title"=>"Delete"}