Вы вызываете resetPaymentDisplay(this) для следующего элемента из-за события onClick
<input id="memberARPaymentchkbox2" type="checkbox" name="memberARPaymentchkbox" onclick="resetPaymentDisplay(this);" payment="216001222" class="cursorPtr">
В функции resetPaymentDisplay(this) он упоминается как element в аргументах функции, но вы также используете $(this) снова в некоторых строках.
Если вы передаете сам элемент ввода в функцию, как вы это делаете, потому что this в вашем коде HTML ссылается на ваш элемент ввода, вы должны иметь возможность установить это нужно проверять только с помощью следующей функции
function resetPaymentDisplay(element) {
element.checked = true;
}
, потому что вы работаете с объектом JavaScript, а не с объектом jQuery.
Для остальных функций, которые Убедившись, что у вас установлен только один из флажков, вы можете использовать jQuery, но это также легко сделать с помощью vanilla JS. Для этого примера давайте go с jQuery, которое вы пытались использовать.
Блок кода удален, потому что он нуждался в исправлении. Пожалуйста, обратитесь к блоку кода ниже.
Примечания:
важно различать JavaScript объекты и jQuery обернутые объекты (те, вы получаете результат поиска jQUery, например, $("#something"). Чтобы помочь вам не забыть, какой из объектов, обернутых в оболочку jQuery, обычно добавляется к обернутым объектам знаком доллара, как вы можете видеть в примере $parent и $otherCheckboxes.
this ключевое слово всегда относится к чему-то в текущей области ... это довольно сложная концепция для понимания, особенно если мы говорим о JavaScript. this в ваш HTML, $(this) в вашем JS коде, и даже если у вас был простой this в вашем JS коде, все ссылки на разные вещи.
Изменить: Хорошо , если честно, я дал ответ вслепую, без тестирования, и сделал очень похожую ошибку, как и вы. Функция $.each оставляет вам JavaScript объектов в item вместо jQuery тех, которых я не делал » t понять. Окончательный код функции должен выглядеть как th is
function resetPaymentDisplay(element) {
element.checked = true;
var $parent = $('#paymentTable');
var $otherCheckboxes = $parent.find(".cursorPtr");
$otherCheckboxes.each(function(i, item) {
if (item.id !== element.id) {
item.checked = false;
}
});
}
Вот пример рабочего скрипта для него: https://jsfiddle.net/g5t3s4uL/