Javascript 与单选按钮关联的复选框_Javascript_Php_Jquery_Arrays

Javascript 与单选按钮关联的复选框

javascript php jquery arrays

Javascript 与单选按钮关联的复选框,javascript,php,jquery,arrays,Javascript,Php,Jquery,Arrays,我从来没见过有人问过这个问题。我看了一下，但找不到答案，也找不到解决这个问题的指南我现在正在制作一个设置表单，其中有两个数组：arraycity（存储不同的城市）和arraystore（存储不同的商店）。有些城市有相同的商店，但有些城市根本没有。例如：Adam（城市）有KFC，Ramen，Subway牛顿城市有地铁，寿司；等等我脑海中的对象数组是： let city_has_store = { Adam: { "KFC", "Ram

我从来没见过有人问过这个问题。我看了一下，但找不到答案，也找不到解决这个问题的指南

我现在正在制作一个设置表单，其中有两个数组：array

city

（存储不同的城市）和array

store

（存储不同的商店）。有些城市有相同的商店，但有些城市根本没有。例如：

Adam

（城市）有

KFC

，

Ramen

，

Subway

<代码>牛顿城市有

地铁

，

寿司

；等等

我脑海中的对象数组是：

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

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


首先，我想你像这样的php数组
() Adam
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

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

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

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

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

我用这样的方法处理数组
() Adam
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

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

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

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

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

完整的代码如下所示
() Adam
[] KFC
[] Subway
[] Ramen
[] Sushi
[] Pizza

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

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

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

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


; 
//单击时获取单选按钮val
var val_radio=val；
//每个阵列城市都有一个存储
对于（i=0；i