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

Question

I've struggled with this one for a couple days and my lack of depth in JavaScript is getting the best of me. This project is in the "mock-up" stage. Briefly, the page starts with selecting a "series". Once selected we have several sections of "boxes" generated dynamically via PHP (eventually will come from database) with unique ID's for each box.

Each Box in each category can independently be turned on/off via hiding the box with a simple JavaScript change of the box div's css display value. This is done as the user will need a visual representation of what they are turning On or Off.

I need to keep track of each box's status as ON or OFF and when the user is done setting all the boxes as On or Off, they will submit the form (not coded yet) and the various radio button states will be acted on with future code not yet written. I am keeping track of this with a simple radio button "On" or "Off" for each box within each group. When the boxes are dynamically built, each group assigns a unique name for the radio button group for the box and a unique ID for each radio button within the box group.

I need the radio button to start with "On" checked for all boxes (ie all boxes are shown) and then if a box is clicked and hidden, the radio button for that box toggles from "On" to "Off" being checked. Then it toggles back to On if the box is shown again. Adding "checked" to the HTML radio button input does not work due to the JS, so it needs to be added via JS.

I understand how to change a single radio button state via JavaScript. Where I am struggling is how to set it up to deal with the dynamic boxes and act on each box as a unique action to set the initial state of "checked" for the "On" radio button and then swapping the values on hide/show. I know I probably need to use "this" in my JS, but... well, like I said, this is my weak area in JS and I'm am looking for guidance to learn.

Thanks in advance to everyone for helping to educate me!

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

Answer 1

Kept at it and got the light bulb to go on.

Changed JS to:

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

After that, set the default of the "On" radio button to "checked" in the dynamically created HTML so just the PHP function changed to:

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;

All is working as desired now.

Thank you to everyone for your assist. Most of the comments lead me in directions that helped me figure this out. Greatly Appreciated!

Answer 2

I recommend you use jquery. then you can write something like.

$("option").change(function(){
   $(this).dowhatever
   do whatever
});

EDIT: I'm also not sure if I completely understand what you're trying to accomplish. I'm happy to try and help if I get a clearer understanding