JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<input class="sale" name="red" type="checkbox" value="red" />
<input class="sale" name="brown" type="checkbox" value="brown" />
<input class="sale" name="small" type="checkbox" value="small" />
<input class="sale" name="large" type="checkbox" value="large" />

JavaScript

var arrayList = [{"color":"red","size":"small"},{"color":"brown","size":"medium"},{"color":"red","size":"large"}];
var newArrayList = [];

$(function() {
    $('.sale').change(function() {
   if($("input[value=red]").prop('checked'){
       if($("input[value=large]").prop('checked')){
         newArrayList.push({"color":"red","size":"large"});
       }
       else{
          newArrayList.push({"color":"red","size":"small"}).push({"color":"red","size":"large"});
       }
       
       console.log(newArrayList);
   }
        });
    
});