javascript - 如何区分类中的每个复选框元素

Question

我真的不知道如何表达这个问题，所以如果这看起来有点模棱两可，我很抱歉。我遇到过这样的情况:我在 cfloop 中生成一堆复选框。每个复选框都有相同的类名 check，但它们代表数据库中的一个值。最初我希望我可以使用 jQuery 检查检查的属性是否存在，但这并没有像我希望的那样工作。它带来的问题是，如果选中了一个复选框，并且如果我选中或取消选中另一个复选框，则该类仍然返回一个在逻辑上有意义的 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 视为独特的值(value)。

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