Как я могу использовать функцию несколько раз на одной странице?

Question

Я хотел бы остановить функцию, чтобы она могла запускаться несколько раз на одной странице.Это некоторые радио-кнопки, которые я хотел бы очистить, если установлен флажок.Это должно работать с бесконечным количеством продуктов.Я худший в javascript, поэтому я надеюсь, что смогу получить ответ?

Образец:

$('.product .question-input').change(function() {
  if ($(this).is(':checked')) { //radio is now checked
    $('.product .question-checkbox').prop('checked', false);
  }
  return false;
});

$('.product .question-checkbox').change(function() {
  if ($(this).is(':checked')) {
    $('.product .question-input').prop('checked', false);
  }
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <div class="form-inline justify-content-center">
    <div class="container text-center">
      <div class="product-title">Adobe</div>
    </div>
    <div class="form-group">
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-1">1
        <input class="form-check-input question-input" type="radio" name="test-1" id="test-1" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-1">2
        <input class="form-check-input question-input" type="radio" name="test-1" id="test-2" value="2"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-1">3
        <input class="form-check-input question-input" type="radio" name="test-1" id="test-3" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-1">4
        <input class="form-check-input question-input" type="radio" name="test-1" id="test-4" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-1">5
        <input class="form-check-input question-input" type="radio" name="test-1" id="test-5" value="1"></label></div>
    </div>
    
  </div>
  <div class="form-group form-check text-center the-checkbox">
    <input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
    <label class="form-check-label" for="check-1">I don't use this product for work</label>
  </div>
</div>
</div>

<div class="product">
  <div class="form-inline justify-content-center">
    <div class="container text-center">
      <div class="product-title">Mocups</div>
    </div>
    <div class="form-group">
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-2">1
        <input class="form-check-input question-input" type="radio" name="test-2" id="test-1" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-2">2
        <input class="form-check-input question-input" type="radio" name="test-2" id="test-2" value="2"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-2">3
        <input class="form-check-input question-input" type="radio" name="test-2" id="test-3" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-2">4
        <input class="form-check-input question-input" type="radio" name="test-2" id="test-4" value="1"></label></div>
        <div class="form-check form-check-inline">
        <label class="form-check-label" for="test-2">5
        <input class="form-check-input question-input" type="radio" name="test-2" id="test-5" value="1"></label></div>
    </div>
    
  </div>
  <div class="form-group form-check text-center the-checkbox">
    <input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
    <label class="form-check-label" for="check-1">I don't use this product for work</label>
  </div>
</div>
</div>

Answer 1

Вы не можете сделать это с одинаковыми именами классов для каждой группы, вам нужно разделить классы в html и создать функции для каждого из них, например:

$('.product1 .question-checkbox1').change(function() {
  if ($(this).is(':checked')) {
    $('.product1 .question-input1').prop('checked', false);
  }
  return false;
});

end, затем product2, product3...

Answer 2

Передавая ссылку в обработчик вместо прямой передачи функции обработчика:

function handler() {
  if ($(this).is(':checked')) {
    $('.product .question-input').prop('checked', false);
  }
  return false;
}

$('.product .question-input').change(handler);

$('.product .question-checkbox').change(handler);