与单选按钮关联的复选框
Posted
技术标签:
【中文标题】与单选按钮关联的复选框【英文标题】:Checkboxes that are associate with radio buttons 【发布时间】:2021-05-21 20:36:58 【问题描述】:我在任何地方都没有看到过这个问题。我查看了但找不到解决此问题的答案或指南。
我现在正在做一个设置表格,其中有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,这样当用户在单选按钮下选择任何商店时,它就会知道如何将这些选定的值放入我一开始计划的对象数组中。
【问题讨论】:
【参考方案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 获取与单选按钮对应的文本