jQuery клик и загрузка в одной функции

Question

У меня есть 2 jQuery функция, которая работает как нажатие и загрузка. Можно ли создать только одну функцию, чтобы я не повторял эту функцию?

$("[name$='radioGroup1'], [name$='radioGroup2']").on('click load', function() {}

Использование «on», как и приведенный выше код, не работает для меня.

<input type="checkbox" name="123.radioGroup1" class="">
<input type="checkbox" name="123.radioGroup1" class="">
<input type="checkbox" name="123.radioGroup1" class="">

<input type="checkbox" name="123.radioGroup2" class="">
<input type="checkbox" name="123.radioGroup2" class="">
<input type="checkbox" name="123.radioGroup2" class="">

$("[name$='radioGroup1'], [name$='radioGroup2']").click(function() {
  var thisGroup = this.name;
    $('input[name="'+thisGroup+'"]').each(function() {
        if($('input[name="'+thisGroup+'"]').is(':checked') == true){
          $('input[name="'+thisGroup+'"]').css("box-shadow", "none");
        } else {
          $('input[name="'+thisGroup+'"]').css("box-shadow", "0 0 4px 0 red");
        }
       });
  });

  $("[name$='radioGroup1'], [name$='radioGroup2']").each( function() {
  var thisGroup = this.name;
    $('input[name="'+thisGroup+'"]').each(function() {
        if($('input[name="'+thisGroup+'"]').is(':checked') == true){
          $('input[name="'+thisGroup+'"]').css("box-shadow", "none");
        } else {
          $('input[name="'+thisGroup+'"]').css("box-shadow", "0 0 4px 0 red");
        }
       });
  });

Answer 1

Попробуйте это.

• Определите процесс как функцию
• Сгруппируйте радиостанцию ​​по <div> или как-то еще и свяжите событие 'click'. (таким образом, у вас есть только 2 прослушивателя событий вместо 6)
• Стилизуйте элементы ввода содержимого с помощью css (чтобы вам не приходилось их инициализировать)
• Добавить / удалить другой класс к элементу группы (так что вам не нужно добавлять / удалять класс для всех элементов в группе).

const fnX = function() {
    var thisGroup = this.id;
    var flag = $('input[name="'+thisGroup+'"]').is(':checked');
    $(this).toggleClass("radiocheck", flag);
}

$("span[class*='radioGroup']").click(fnX);

.radioGroup > input {
  box-shadow: 0 0 4px 0 red
}
.radioGroup.radiocheck > input {
  box-shadow: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="radioGroup" id="123.radioGroup1">
<input type="checkbox" name="123.radioGroup1" class="">
<input type="checkbox" name="123.radioGroup1" class="">
<input type="checkbox" name="123.radioGroup1" class="">
</span>
<span class="radioGroup" id="123.radioGroup2">
<input type="checkbox" name="123.radioGroup2" class="">
<input type="checkbox" name="123.radioGroup2" class="">
<input type="checkbox" name="123.radioGroup2" class="">
</span>

Answer 2

Используйте css, js и html при рендеринге

$('input[type="checkbox"]').click(function() {
    var thisGroup = this.name;  
    if($(this).prop('checked')){
        $('input[name="'+thisGroup+'"]').addClass('checked');
    } else {
        if ($('input[name="'+thisGroup+'"]:checked').length === 0)  {
        	$('input[name="'+thisGroup+'"]').removeClass('checked');
        }
    }
});

input[type="checkbox"] {
  box-shadow: 0 0 4px 0 red;
}
input[type="checkbox"].checked {
  box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="123.radioGroup1" class="radioGroup1">
<input type="checkbox" name="123.radioGroup1" class="radioGroup1">
<input type="checkbox" name="123.radioGroup1" class="radioGroup1">

<input type="checkbox" name="123.radioGroup2" class="radioGroup2">
<input type="checkbox" name="123.radioGroup2" class="radioGroup2">
<input type="checkbox" name="123.radioGroup2" class="radioGroup2">

<!-- checked class add when render your html -->
<input type="checkbox" name="123.radioGroup3" class="radioGroup3 checked" checked>
<input type="checkbox" name="123.radioGroup3" class="radioGroup3 checked">
<input type="checkbox" name="123.radioGroup3" class="radioGroup3 checked">