我已经在这个问题上苦苦挣扎了几天，而我在JavaScript中缺乏深度是我的最佳选择 . 该项目处于“模拟”阶段 . 简而言之，该页面首先选择“系列” . 一旦选中，我们就会有几个“盒子”部分通过PHP动态生成（最终将来自数据库），每个盒子都有唯一的ID .
通过使用box div的css显示值的简单JavaScript更改隐藏框，可以独立地打开/关闭每个类别中的每个Box . 这样做是因为用户需要可视化表示他们打开或关闭的内容 .
我需要跟踪每个盒子的状态为ON或OFF，当用户完成将所有盒子设置为On或Off时，他们将提交表格（尚未编码），各种单选按钮状态将在未来采取行动代码尚未写入 . 我正在通过一个简单的单选按钮“On”或“Off”跟踪每组中的每个框 . 当动态构建框时，每个组为框的单选按钮组分配唯一的名称，为框组内的每个单选按钮分配唯一的ID .
我需要单选按钮以“On”开始检查所有框（即显示所有框），然后如果单击并隐藏了一个框，则该框的单选按钮从“On”切换到“Off”被检查 . 然后，如果再次显示该框，则将其切换回“打开” . 由于JS，将“已检查”添加到HTML单选按钮输入不起作用，因此需要通过JS添加 .
我了解如何通过JavaScript更改单个单选按钮状态 . 我正在努力的方法是如何设置它来处理动态框并作为一个独特的动作，为“On”单选按钮设置“已检查”的初始状态，然后交换hide / show上的值 . 我知道我可能需要在我的JS中使用“this”，但是......好吧，就像我说的那样，这是我在JS中的弱点，我正在寻找学习指导 .
在此之前，感谢大家帮助教育我！
HTML / PHP
<?php
/*Test Data */
$series140 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series220 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series240 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series440 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series540 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series640 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series740 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series2100 = array(
'st' => 2,
'rt' => 3,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 6,
'sjo' => 7,
'mp' => 8,
'mmo' => 9,
'sd' => 8,
'irp' => 7,
'pl' => 6,
'kl' => 5,
'scbk' => 4,
'dcbk' => 3,
'ocgt' => 2
);
$series3300 = array(
'st' => 1,
'rt' => 0,
'ibt' => 4,
'dt' => 5,
'lpjmh' => 3,
'sjo' => 1,
'mp' => 2,
'mmo' => 1,
'sd' => 2,
'irp' =>47,
'pl' => 4,
'kl' => 2,
'scbk' => 3,
'dcbk' => 3,
'ocgt' => 2
);
if (isset($_POST['build'])) {
$series = $_POST['doorSeries'];
switch ($series) {
// BUILD SERIES FUNCTION TO PULL FROM DATABASE IN FUTURE CODE
case 140:
$series = $series140;
break;
case 220:
$series = $series220;
break;
case 240:
$series = $series240;
break;
case 440:
$series = $series440;
break;
case 540:
$series = $series540;
break;
case 640:
$series = $series640;
break;
case 740:
$series = $series740;
break;
case 2100:
$series = $series2100;
break;
case 3300:
$series = $series3300;
break;
default:
echo "not a valid selection";
exit;
break;
}
}
function seriesBlocks($blockType) {
if (is_array($blockType)) {
$category = '';
foreach ($blockType as $key => $value) {
$categoryName = $key;
$category .= '<h1>' . $categoryName . ' ' . $value . '</h1>';
// $category .= '<p>show all | hide all</p>';
for ($i=0; $i < $value; $i++) {
$blockName = $categoryName . 'Block' . $i;
$category .= "<a href=javascript:ReverseDisplay('". $blockName ."') class='shopLink'>";
$category .= 'Click to show/hide.';
$category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'On" value="on" >On';
$category .= '<input type="radio" name="' . $blockName . '" id="' . $blockName . 'Off" value="off">Off';
$category .= '<div id="' . $blockName . '" class="shopBlock">';
$category .= '<h1>' . $blockName . '</h1>';
$category .= '<p>Blah Blah Blah</p>';
$category .= '</div></a>';
}
$category .= '<div class="clearfix"></div>';
}
}
return $category;
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
<title>Shop Drawings</title>
</head>
<body>
<!-- Testing area -->
<h1>Testing Area</h1>
<?php
print_r($series140);
?>
<div class="clearfix"></div>
<!-- End Testing Area -->
<form name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="doorSeries">Select Door Series to Build:</label>
<select name="doorSeries" id="doorSeries">
<option value="140">140</option>
<option value="220">220</option>
<option value="240">240</option>
<option value="440">440</option>
<option value="540">540</option>
<option value="640">640</option>
<option value="740">740</option>
<option value="2100">2100</option>
<option value="3300">3300</option>
</select>
<input type="submit" name="build" id="build" value="Start the Build">
</form>
<?php
if ($_POST) {
echo seriesBlocks($series);
echo $series;
}
?>
</body>
</html>
JavaScript的
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
document.getElementById(d + "On").checked = true;
}
else {
document.getElementById(d).style.display = "none";
document.getElementById(d + "Off").checked = true;
}
}
CSS
.shopLink {
display: block;
float: left;
background-color: #ccc;
margin: 10px;
}
.clearfix {
clear: both;
}
h1 {
margin-bottom: 0;
}
2 回答
保持它，让灯泡继续下去 .
将JS更改为：
之后，在动态创建的HTML中将“On”单选按钮的默认值设置为“checked”，这样只需将PHP函数更改为：
现在一切都正常运作 .
感谢大家的帮助 . 大多数评论引导我指导我帮我解决这个问题 . 非常感激！
我建议你使用jquery . 然后你可以写点东西 .
编辑：我也不确定我是否完全理解你想要完成的事情 . 如果我得到更清楚的理解，我很乐意尝试帮助