Checkboxes that are associate with radio buttons

Question

I don't see this question ever asked anywhere. I looked but couldn't find answer or a guide to walk through this problem.

I'm making a setting form right now, where there are 2 arrays: array city (which stores different cities) and array store (which stores different stores). Some city has the same stores, but some doesn't have that store at all. For example: Adam (city) has KFC , Ramen , Subway ; Newton city has Subway , Sushi ; etc.

The object array that I have in my mind is:

let city_has_store = {
   Adam: {
      "KFC",
      "Ramen",
      "Subway"
   },
   Newton: {
      "Subway",
      "Sushi"
   }
};

English isn't my first language, so it's kind of tough to describe the idea. But in my form now, I have checkboxes inside radio buttons. Which is generated through php, by grabbing two arrays that I mentioned about.

<?php
foreach ( $cities as $city ) : ?>

<label><input type="radio" name="selCity" value="<?php echo _e( $city->id ); ?>"><?php echo _e( $city->name ); ?></label>

<?php
   foreach ( $stores as $store ) : ?>

      <label><input type="checkbox" name="selStore" value="<?php echo _e( $store->id ); ?>"><?php echo _e( $store->name ); ?></label>

<?php
   endforeach;
endforeach;
?>

The form right now look like this

() Adam
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

() Newton
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

() Vine
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

My problem is, how do I start my javascript / jquery, so that when the user select any store under the radio button, it will know how to put those selected value into the object array that I planned in beginning.

Answer 1

first my asumption you php array like this

$cities=array('Adam','Newton');
$stores=array('KFC','Ramen','Sushi','Pizza','Subway');

$city_has_store=array('Adam'=> array("KFC",
                                   "Ramen",
                                   "Subway"
                                ),
                      'Newton'=> array("Subway",
                                       "Sushi"
                      )
);

and i foreach the array like this

foreach ( $cities as $city ) : ?>
    <div style="margin-bottom: 20px;">
        <label style="display: block;">
            <input type="radio" onclick="changeCheck(this.value);" id="selCity" name="selCity"  value="<?php echo $city; ?>"><?php echo $city; ?>
        </label>
            <?php
               foreach ( $stores as $store ) : ?>
                    <label style="display: block;">
                        <input type="checkbox" id="<?=$city?>_<?=$store?>" name="selStore" value="<?php echo $store; ?>" disabled><?php echo  $store; ?>
                    </label>
            <?php
               endforeach;
            ?>
    </div>
<?php
endforeach;
?>

when i foreach the array i add onclick="changeCheck(this.value);" to input radio button and i add id into input checkbox its combine from $city and the $store value and i disabled first all checkbox

and at javascript

function changeCheck(val) {
    //first disable all checkbox 
    $('input[type="checkbox"]').prop('disabled', true); 
    // get the array city_has_store
    var city_has_store = <?php echo json_encode($city_has_store); ?>; 
    //get the radio button val when click
    var val_radio = val; 
    //foreach the array city_has_store
    for (i = 0; i < city_has_store[val_radio].length ; ++i) {  
            //and change disabled to false when the input checkbox id like combine $city_$store
            $('#'+val_rad+'_'+city_has_store[val_radio][i]).prop('disabled', false); 
    }
}

and the full code look like this

<?php

$cities=array('Adam','Newton');
$stores=array('KFC','Ramen','Sushi','Pizza','Subway');

$city_has_store=array('Adam'=> array("KFC",
                                   "Ramen",
                                   "Subway"
                                ),
                      'Newton'=> array("Subway",
                                       "Sushi"
                      )
);


foreach ( $cities as $city ) : ?>
    <div style="margin-bottom: 20px;">
        <label style="display: block;">
            <input type="radio" onclick="changeCheck(this.value);" id="selCity" name="selCity"  value="<?php echo $city; ?>"><?php echo $city; ?>
        </label>
            <?php
               foreach ( $stores as $store ) : ?>
                    <label style="display: block;">
                        <input type="checkbox" id="<?=$city?>_<?=$store?>" name="selStore" value="<?php echo $store; ?>" disabled><?php echo  $store; ?>
                    </label>
            <?php
               endforeach;
            ?>
    </div>
<?php
endforeach;
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">

   function changeCheck(val) {
        //first disable all checkbox 
        $('input[type="checkbox"]').prop('disabled', true); 
        // get the array city_has_store
        var city_has_store = <?php echo json_encode($city_has_store); ?>; 
        //get the radio button val when click
        var val_radio = val; 
        //foreach the array city_has_store
        for (i = 0; i < city_has_store[val_radio].length ; ++i) {  
                //and change disabled to false when the input checkbox id like combine $city_$store
                $('#'+val_rad+'_'+city_has_store[val_radio][i]).prop('disabled', false); 
        }
    }
</script>