如何区分 class 中的每个复选框元素

Question

我真的不知道如何表达这个问题，如果这看起来有点模棱两可，我很抱歉。我有一种情况，我在 cfloop 中生成了一堆复选框。每个复选框的 class 名称与 check 相同，但它们代表数据库中的一个值。最初我希望我可以使用 jQuery 检查检查的属性是否存在，但这并没有像我希望的那样工作。它带来的问题是，如果有一个复选框被选中，如果我选中或取消选中另一个复选框，class 仍然 returns 一个 true 值，这在逻辑上是有意义的。

这是设置检查值的 ColdFusion 和生成 html:

的循环

<cfloop>   
  <cfif ContainsSic.HasSiC EQ 1 >
    <cfset CheckedResult = "checked=""checked""" >
  <cfelse>
    <cfset CheckedResult = "" >
  </cfif>

 <cfoutput>
  <tr>
   <td align="center">#Passed_CustomerName#</td>
   <td align="center">#Passed_LotNumber#</td>
   <td align="center">#Passed_SubLot#</td>
   <td align="center">#Passed_CarbonAvg#</td>
   <td align="center"><input type="button" onclick="location.href='';" value="Amend" /></td>
   <td align="center"><input type="checkbox" onclick="ajax(#Passed_CustomerID#, #Passed_LotNumber#, #Passed_SubLot#)" #CheckedResult#/></td>
   <td align="center"><a href="" target="_blank">Red Tag Page</a></td>
  </tr>
 </cfoutput>
</cfloop>

这是处理 ajax 调用和检查值的 jQuery：

function ajax(CustomerID, LotNumber, SubLot) { 
    if ($("input:checkbox").is(":checked")) {  
        var Checked = true;
    } 
    else {
        var Checked = false;
    }

    var passed_data = {
        method: 'UpdateHasSiC',
        CustomerID : CustomerID,
        LotNumber: LotNumber,
        SubLot: SubLot,
        Checked: Checked
    }

    console.log(passed_data);

    $.ajax({
      type: 'POST',
      url: 'LecoXMLRead_Ajax.cfc',
      data: passed_data,
      dataType: 'JSON',
      success: function(data) {

      },
      error: function(e){

      }
    })

}

这背后的工作流程是当页面加载时，它从数据库中获取值，以确定是否应选中该复选框。它将数据库中给出的值写入带有指定选中或未选中复选框的行。然后用户应该能够更改复选框，并且在这样做时，使用 1 或 0 更新数据库中的值。 1代表当然是检查过了

我希望这是有道理的，我可以提供澄清或其他任何需要的东西。

谢谢

Answer 1

您可以在复选框处添加自定义数据属性，然后使用该属性值来选择复选框

<input type="checkbox" data-customerId="#Passed_CustomerID#" onclick="ajax(#Passed_CustomerID#, #Passed_LotNumber#, #Passed_SubLot#)" #CheckedResult#/>

在功能中，您可以使用客户 ID 来识别特定的复选框。我将客户 ID 视为唯一值。

function ajax(CustomerID, LotNumber, SubLot) { 
        if ( $('[data-customerId="'+CustomerID+'"]:checkbox').is(":checked")) {  
        var Checked = true;
     } 
    else {
        var Checked = false;
    }
   }

Answer 2

摆脱 onclick 动作，并将您的 markup/js 更改为：

HTML:

<input type="checkbox" data-customerid="#Passed_CustomerID#" data-lotnumber="#Passed_LotNumber#" data-sublot="#Passed_SubLot#" #CheckedResult# />

JS:

<script>
$(document).ready(function () {
    $('input[type="checkbox"][data-customerid]').on('click', function(e) {
        ajax($(this).data('customerid'), $(this).data('lotnumber'), $(this).data('sublot'), $(this).is(':checked'));
    });
});
</script>

然后您可以将选中的参数添加到您的 ajax 函数中。

（我没有测试这个，所以寻找语法错误。LMK，如果找到我会更正。）

如何区分 class 中的每个复选框元素

How to differentiate between each checkbox element within a class

javascript

coldfusion

jquery