Как сделать универсальный скрипт?

Question

Подскажите, как можно сделать скрипт универсальным? При выборе чекбоксов с классом categorys значение value записываются в input c id result1. И для второй партии input нужно писать ещё один скрипт, но с другими классами categorys2 c id result2. Можно ли как-то сделать, чтобы у каждой партии чекбоксов был свой input, но при этом было всё в рамках одного скрипта? Чтобы классы и id подставлялись автоматически по клику или что-то в этом духе...

function json(obj){

    let json = {
      id: [],
    };

    $('input[class="categorys"]:checked').each(function(){
      json.id.push(Number($(this).val()));
    });

    inp = document.querySelector("#result1");
    inp.value = JSON.stringify(json);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="categorys" onClick="json()" value="1" type="checkbox">
<input class="categorys" onClick="json()" value="2" type="checkbox">
<input class="categorys" onClick="json()" value="3" type="checkbox">

<input class="form-control" name="category" id="result1" value=""/>

<input class="categorys2" onClick="json()" value="1"  type="checkbox">
<input class="categorys2" onClick="json()" value="2" type="checkbox">
<input class="categorys2" onClick="json()" value="3" type="checkbox">
<input class="form-control" name="category" id="result2" value=""/>

Answer 1

function json(cls, res) {

  let json = {
    id: [],
  };

  $(`input.${cls}:checked`).each(function() {
    json.id.push(Number($(this).val()));
  });

  $(`#${res}`).val(JSON.stringify(json));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="categorys" onClick="json('categorys','result1')" value="1" type="checkbox">
<input class="categorys" onClick="json('categorys','result1')" value="2" type="checkbox">
<input class="categorys" onClick="json('categorys','result1')" value="3" type="checkbox">
<input class="form-control" name="category" id="result1" value="" />

<input class="categorys2" onClick="json('categorys2','result2')" value="1" type="checkbox">
<input class="categorys2" onClick="json('categorys2','result2')" value="2" type="checkbox">
<input class="categorys2" onClick="json('categorys2','result2')" value="3" type="checkbox">
<input class="form-control" name="category" id="result2" value="" />

Answer 2

Я не очень хорошо разбираюсь в JQuery. Если вам нужен код без встроенных скриптов и чисто на JavaScript, думаю, я вам помог!

let category = document.querySelectorAll('.categorys');
for(let i=0;i<category.length;i++){
    category[i].setAttribute('onClick',"Clicked(this)")
}
 
function Clicked(target) {
    let json = {
      id: [],
    };

  target.closest('.group')?.querySelectorAll('.categorys:checked')
    .forEach(el => json.id.push(el.value));
    target.closest('.group').querySelector('.form-control').value = JSON.stringify(json);
    
}

<div class="group">
  <input class="categorys" value="1" type="checkbox">
  <input class="categorys" value="2" type="checkbox">
  <input class="categorys" value="3" type="checkbox">
  <input class="form-control" name="category" value=""/>
</div>
<div class="group">
  <input class="categorys" value="1"  type="checkbox">
  <input class="categorys" value="2" type="checkbox">
  <input class="categorys" value="3" type="checkbox">
  <input class="form-control" name="category" value=""/>
</div>

БЛОГ НА HUSL

Как сделать универсальный скрипт?

Ответы (2 шт):