单选按钮+复选框组合

Radio buttons + checkbox combinations

本文关键字：组合 复选框 单选按钮      更新时间：2023-09-26

目的是我有一对单选按钮，每一对单选按钮都插入到一个带有博客文章的div中。也就是说，每个帖子都可以点赞(开)/不喜欢(关)。然后，复选标记作为一个通用开关，显示所有喜欢/不喜欢的帖子。下面的代码只是一个原型，但我确实想添加第二个复选框，允许用户隐藏所有喜欢的，隐藏所有不喜欢的，隐藏两者(看看哪些还没有决定)或没有。

在下面的代码中，我无法使复选框独立于单选按钮工作。事实上，选中复选框将单选按钮切换到On。我希望单选按钮保持在用户想要的地方，当检查框，只有如果电台是对隐藏的消息显示。如果收音机是关闭的，勾选这个方框应该没有任何结果。

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

那么，谁能帮我把这段代码修改成:

  1. 添加第二个复选框
  2. 有第一个复选框隐藏所有div，其中radio是On
  3. 有第二个复选框隐藏所有div，其中单选是关闭
  4. 让无线电选择记住他们在哪里，这样当用户返回时，他的设置被召回。

首先，您应该意识到强烈建议使用框架。如。看看jQuery。示例:您可以开始替换"document"。getElementById"，带有$ (char)。这让你专注于解决问题，而不是如何做(关键字，浏览器支持等)。

相关文章：