切换javascript上的单选按钮隐藏/显示div

时间：2014-06-04 18:20:50

标签： javascript php html css

我已经在这个问题上挣扎了好几天，而我在JavaScript方面缺乏深度也是我的最佳选择。这个项目是在＆＃34;模拟＆＃34;阶段。简而言之，该页面首先选择＆＃34;系列＆＃34;。一旦被选中，我们有几个部分＆＃34; box＆＃34;通过PHP动态生成（最终将来自数据库），每个框都有唯一的ID。

通过使用box div的css显示值的简单JavaScript更改隐藏框，可以独立地打开/关闭每个类别中的每个框。这样做是因为用户需要直观地表示他们打开或关闭的内容。

我需要跟踪每个方框的状态为ON或OFF，当用户将所有方框设置为On或Off时，他们将提交表格（尚未编码）和各种单选按钮各州将对未来尚未编写的代码采取行动。我用一个简单的单选按钮来跟踪这个问题＆＃34; On＆＃34;或＆＃34;关＆＃34;对于每个组中的每个框。当动态构建这些框时，每个组都会为框的单选按钮组分配唯一的名称，并为框组中的每个单选按钮分配唯一的ID。

我需要单选按钮以＆＃34; On＆＃34;检查所有框（即显示所有框），然后如果单击并隐藏框，则该框的单选按钮从＆＃34; On＆＃34;到＆＃34;关＆＃34;被检查。然后，如果再次显示该框，则将其切换回“打开”。添加＆＃34;已检查＆＃34;由于JS，HTML单选按钮输入不起作用，因此需要通过JS添加。

我了解如何通过JavaScript更改单个单选按钮状态。我正在努力的是如何设置它来处理动态框并作用于每个框作为一个独特的动作来设置＆＃34;检查＆＃34;对于＆＃34; On＆＃34;单选按钮然后交换hide / show上的值。我知道我可能需要使用＆＃34;这个＆＃34;在我的JS中，但是......好吧，就像我说的那样，这是我在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 -->
<br />

<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 个答案:

答案 0 :(得分：1)

保持它并让灯泡继续。

将JS更改为：

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;
    }
}

之后，设置＆＃34; On＆＃34;的默认值。单选按钮＆＃34;已检查＆＃34;在动态创建的HTML中，只需将PHP函数更改为：

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" checked>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;

现在一切正常。

感谢大家的帮助。大多数评论引导我指导我帮我解决这个问题。非常赞赏！

答案 1 :(得分：0)

我建议你使用jquery。然后你可以写出类似的东西。

$("option").change(function(){
   $(this).dowhatever
   do whatever
});
编辑：我也不确定我是否完全理解你要完成的任务。如果我得到更清楚的理解，我很乐意尝试帮助

相关问题
最新问题