Pushing attribute value to two different arrays based on radio options selected

Question

In short, if a user selects yes to a radio option, I'm trying to obtain the data-name attribute from that input and push it to an array called accepted_array .

If a user selects no , then store data-name to declined_array .

Here is a visual to the markup:

<div class="guest__options-group">
  <input id="attending-yes-0" type="radio" name="attendance-0" value="yes" data-name="John" required />
  <label for="attending-yes-0">Yes</label>
</div>

<div class="guest__options-group">
  <input id="attending-no-0" type="radio" name="attendance-0" value="no" data-name="John" required />
  <label for="attending-no-0">No</label>
</div>

<!-- options for Alex -->

<div class="guest__options-group">
  <input id="attending-yes-1" type="radio" name="attendance-1" value="yes" data-name="Alex" required />
  <label for="attending-yes-1">Yes</label>
</div>

<div class="guest__options-group">
  <input id="attending-no-1" type="radio" name="attendance-1" value="no" data-name="Alex" required />
  <label for="attending-no-1">No</label>
</div>

Here are 2 approaches I've experimented with:

First approache.

(function ($) {

  $( ".guest__attendance-input" ).each(function(index) {
    $(this).on("click", function(){

      var $this = $(this);
      var checkedVal = $this.val();
      var accepted_array = [];
      var declined_array = [];

      if( checkedVal == "yes" ) {
        var name = $this.data("name");
        accepted_array.push(name);
      } else {
        declined_array.push(name);
      }

      console.log("accepted " + accepted_array.join(","));
      console.log("declined " + accepted_array.join(","));

    });

  });

}) (jQuery);

This only executes for the selected user and adds the name to both arrays.

Second approache.

(function ($) {

  $( ".guest__attendance-input" ).each(function(index) {
    $(this).on("click", function(){

      var $this = $(this);
      var data = [];
      var checked = $this.is(':checked');
      var name = $this.attr('data-name');
      
      if (checked) {
        if (!data[name]) {
          data[name] = []
        }
        data[name].push($this.val())
      }
      console.log(data);
    });

  });

}) (jQuery);

Which only adds the user to a single array.

If both select yes, I need both names in the accepted_array . If someone selects yes initially and then selects no I need to remove them from the accepted_array and vice versa.

Answer 1

You can use splice with inArray to remove value from array if someone selects yes initially and then selects no and vice versa.

Example:

 var accepted_array = []; var declined_array = []; $('.guest__options-group > input[type=radio]').on('change', function() { var $this = $(this); var name = $this.data("name"); var checkedVal = $this.val(); var name = $this.data("name"); if (checkedVal == "yes") { accepted_array.push(name); declined_array.splice($.inArray(name, declined_array), 1); } else { declined_array.push(name); accepted_array.splice($.inArray(name, accepted_array), 1); } console.log("accepted " + accepted_array.join(",")); console.log("declined " + declined_array.join(",")); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- options for John --> <div class="guest__options-group"> <input id="attending-yes-0" type="radio" name="attendance-0" value="yes" data-name="John" required /> <label for="attending-yes-0">Yes</label> </div> <div class="guest__options-group"> <input id="attending-no-0" type="radio" name="attendance-0" value="no" data-name="John" required /> <label for="attending-no-0">No</label> </div> <!-- options for Alex --> <div class="guest__options-group"> <input id="attending-yes-1" type="radio" name="attendance-1" value="yes" data-name="Alex" required /> <label for="attending-yes-1">Yes</label> </div> <div class="guest__options-group"> <input id="attending-no-1" type="radio" name="attendance-1" value="no" data-name="Alex" required /> <label for="attending-no-1">No</label> </div>