单选按钮 +复选框组合

发布于 2024-12-01 11:14:16 字数 2060 浏览 3 评论 0原文

我的目标是有一对单选按钮，每对单选按钮都插入到带有博客文章的 div 中。 IE 每个帖子都可以喜欢（打开）/不喜欢（关闭）。然后，复选标记充当所有喜欢/不喜欢的帖子的通用开关。下面的代码只是一个原型，但我确实想添加第二个复选框，使用户能够隐藏所有喜欢的、隐藏所有不喜欢的、隐藏两者（以查看哪些尚未决定）或不隐藏。

在下面的代码中，我无法使复选框独立于单选按钮工作。实际上，选中该框会将单选按钮切换为“打开”。我希望单选按钮保留在用户想要的位置，并且在选中该框时，只有当单选按钮打开时才会显示隐藏的消息。如果无线电处于关闭状态，则选中该框不会产生任何结果。

<!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</title>
<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>

那么，有人可以帮我修改此代码以：

添加第二个复选框
让第一个复选框隐藏无线电打开的所有 div
让第二个复选框隐藏无线电关闭的所有 div
让无线电选择记住它们所在的位置，以便当用户返回时，他的设置被调用。

原文

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</title>
<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.

分享到QQ

分享到微博