Как различать каждый элемент флажка в классе
Я действительно не знаю, как сформулировать этот вопрос, поэтому извиняюсь, если это кажется немного двусмысленным. У меня есть ситуация, когда я создаю кучу флажков в cfloop. Каждый флажок имеет одно и то же имя класса check, но они представляют значение в базе данных. Первоначально я надеялся, что смогу просто проверить, существует ли свойство checked с помощью 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.info(passed_data);
$.ajax({
type: 'POST',
url: 'LecoXMLRead_Ajax.cfc',
data: passed_data,
dataType: 'JSON',
success: function(data) {
},
error: function(e){
}
})
}
Рабочий процесс, стоящий за этим, заключается в том, что когда страница загружается, она берет значения из базы данных, которая определяет, следует ли установить флажок. Он записывает значения, полученные из базы данных, в строки с установленным флажком. Затем пользователь должен иметь возможность изменить флажок и при этом обновить значение в базе данных с помощью 1 или 0. Представляющий его 1 проверялся конечно.
Надеюсь, это имеет смысл, я могу дать разъяснения или что-то еще, что нужно.
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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;
}
}
@ G.Rose - использование атрибута onclick не рекомендуется в html5. Смотрите мой ответ ниже.
Избавьтесь от действия 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, и я исправлю, если они будут обнаружены.)
Хорошо, я даже не знал, что к элементам можно добавлять собственные атрибуты. Большое спасибо!