Как провести различие между каждым элементом флажка в классе

Question

Я действительно не знаю, как сформулировать этот вопрос, поэтому мне жаль, если это кажется немного двусмысленным. У меня есть ситуация, когда я генерирую кучу флажков в cfloop. Каждый флажок имеет одно и то же имя класса check, но они представляют значение в базе данных. Первоначально я надеялся, что смогу просто проверить, существует ли свойство selected с помощью 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>

А вот jQuery, который обрабатывает вызов ajax и проверенное значение:

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

Избавьтесь от действия 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, и я исправлю, если найду.)

Answer 2

Вы можете добавить пользовательский атрибут данных в флажок, а затем использовать это значение атрибута, чтобы установить флажок

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

В функции вы можете использовать этот идентификатор клиента для определения этого конкретного флажка. Я рассматриваю идентификатор клиента как уникальное значение.

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