与单选按钮关联的复选框

Posted

技术标签:

【中文标题】与单选按钮关联的复选框【英文标题】:Checkboxes that are associate with radio buttons 【发布时间】:2021-05-21 20:36:58 【问题描述】:

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

我现在正在做一个设置表格,其中有2个数组:数组city(存储不同的城市)和数组store(存储不同的商店)。有些城市有相同的商店,但有些城市根本没有那家商店。例如:Adam(城市)有KFCRamenSubwayNewton城市有SubwaySushi;等等

我脑海中的对象数组是:

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,这样当用户在单选按钮下选择任何商店时,它就会知道如何将这些选定的值放入我一开始计划的对象数组中。

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于与单选按钮关联的复选框的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webdriver python 获取与单选按钮对应的文本

PHP - 检索与单选按钮对应的所有数据

将 TextView 与单选按钮标签对齐

QT软件开发之基础控件--2.1.4 checkBox按钮

jQuery如何将“禁用剪切和粘贴脚本”与单选按钮列表结合起来?

23.矩形交互样式与单选按钮设置(没太掌握好)