javascript - 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");
        }
       });
  });

标签： javascriptjquery

Answer 1

渲染时使用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">