时间戳

首页 > 解决方案 > 如何区分类中的每个复选框元素

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

问题描述

我真的不知道如何表达这个问题，所以如果这看起来有点模棱两可，我很抱歉。我有一种情况，我在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){

      }
    })

}

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

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

谢谢

标签： javascriptjquerycoldfusion

解决方案

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

<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;
    }
   }

推荐阅读