Radio buttons + checkbox combinations_问答_开发者

开发者 https://www.devze.com 2023-03-31 08:06 出处：网络

The aim is that I have a pair of radio buttons and each pair of radio buttons is inserted in a div with a blog post. I.E. each post can be liked(on)/disliked(off). The checkmark then serves as a universal switch to how all liked/disliked posts. The code below is merely a prototype but I do want to add a second checkbox, enabling users to hide all liked, hide all disliked, hide both (to see which ones haven't been decided on) or none.

In the code below, I cannot get the check box to work independently of the radio buttons. As it is, checking the box switches the radio button to On. I want the radio button to remain where the user wants it and when checking the box, only IF radio is On does the hidden message show. If the radio is Off, checking the box should result in nothing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unhide on checkboxes/radio buttons</ti开发者_如何学Gotle>
<script type="text/javascript">
function toggleLayer(val)
{
    if(val == 'on' || val === true)
    {
        document.getElementById('a1').checked = true;
        document.getElementById('layer1').style.display = 'block';
    }
    else if(val == 'off' || val === false)
    {
        document.getElementById('a2').checked = true;
        document.getElementById('layer1').style.display = 'none';
    }
}
</script>
</head>
<body>
<form action="" method="post">
    <fieldset>
        <legend>Unhide Layer Form</legend>
        <ul>
            <li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li>
            <li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /></li>
        </ul>
    </fieldset>
</form>
<div id="layer1">You can now see this.</div>
</body>
</html>

So, can someone help me modify this code to:

add a second checkbox
Have the first checkbox hide all divs where radio is On
Have the second checkbox hide all divs where radio is Off
Have the radio selections remember where they were so when the user returns, his settings are recalled.

To begin with, you should be aware that the usage of an framework is strongly recommended. eg. take a look at jQuery. example: You can start replacing "document.getElementById" with a $ (char). This lets you focus on the problem solving, instead of how to do it (wich keywords, browser support etc).