Question

我真的不知道该如何措辞，因此，如果这看起来有点模棱两可，我感到抱歉。我遇到的情况是在cfloop中生成了一堆复选框。每个复选框具有相同的类名check，但它们表示数据库中的值。最初，我希望我可以使用jQuery检查一下checked属性是否存在，但这并没有达到我的期望。它带来的问题是，如果选中了一个复选框，并且我选中或取消选中了另一个复选框，则该类仍会返回一个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动作，并将您的标记/ 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，如果找到，我会进行纠正。）

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

2 个答案: