与单选按钮关联的复选框

Question

我在任何地方都没有看到过这个问题。我查看了但找不到解决此问题的答案或指南。

我现在正在做一个设置表格，其中有2个数组：数组city（存储不同的城市）和数组store（存储不同的商店）。有些城市有相同的商店，但有些城市根本没有那家商店。例如：Adam（城市）有KFC、Ramen、Subway； Newton城市有Subway，Sushi；等等

我脑海中的对象数组是：

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

英语不是我的母语，所以很难描述这个想法。但现在在我的表单中，我在单选按钮中有复选框。它是通过 php 生成的，通过抓取我提到的两个数组。

<?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;
?>

现在的表单是这样的

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

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

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

我的问题是，我如何启动我的javascript/jquery，这样当用户在单选按钮下选择任何商店时，它就会知道如何将这些选定的值放入我一开始计划的对象数组中。

Answer 1

首先我假设你是这样的 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 数组

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;
?>

当我对数组进行 foreach 时，我将 onclick="changeCheck(this.value);" 添加到输入单选按钮并将 id 添加到输入复选框中，它结合了 $city 和 $store 值，我首先禁用了所有复选框

在 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); 
    }
}

完整的代码如下所示

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