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

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 >
  <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 >
  <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 >
  <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 >
  <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.

CodePudding user response：

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 >
  <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 >
  <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 >
  <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 >
  <input id="attending-no-1" type="radio" name="attendance-1" value="no" data-name="Alex" required />
  <label for="attending-no-1">No</label>
</div>