[英]Checkboxes that are associate with radio buttons
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).我现在正在做一个设置表格,其中有2个arrays:array
city
(存储不同的城市)和array store
(存储不同的商店)。 Some city has the same stores, but some doesn't have that store at all.有些城市有相同的商店,但有些城市根本没有那家商店。 For example:
Adam
(city) has KFC
, Ramen
, Subway
;例如:
Adam
(城市)有KFC
、 Ramen
、 Subway
; Newton
city has Subway
, Sushi
; Newton
市有Subway
、 Sushi
; etc.等等
The object array that I have in my mind is:我心中的 object 阵列是:
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.
通过抓取我提到的两个 arrays,通过 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;
?>
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. 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.
first my asumption you php array 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"
)
);
and i foreach the array like this我像这样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;
?>
when i foreach the array i add onclick="changeCheck(this.value);"
当我 foreach 数组时,我添加
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输入单选按钮,我将 id 添加到输入复选框中,它结合了
$city
和$store
值,我首先禁用了所有复选框
and at javascript在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.