Question

你好javascript这里和jquery很新，绝对不知道我在做什么。我有4个复选框。当选中其中一个或两个时，我需要有1个和2个复选框，显示隐藏的#div1和取消选中复选框3和4（如果选中它们）并隐藏div2（如果显示）。然后选中其中一个或两个时的3和4复选框显示隐藏的#div2并取消选中复选框1和2（如果已选中）并隐藏div1（如果显示）。

这是我没有任何JavaScript的HTML。尝试了一些，但我对它不太好。

<html>
<head>
<style type="text/css">
<!--
.divstyle
{
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    margin: 10px 0 0 0;
}
-->
</style>
</head>
<body>
<p>
<input name="chk1" type="checkbox" id="chk1"/> 
Group1 Black
<input name="chk2" type="checkbox" id="chk2"/>
Group1 White
<input name="chk3" type="checkbox" id="chk3"/>
Group2 Red
<input name="chk4" type="checkbox" id="chk4"/>
Group2 Blue</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
</body>
</html>

我希望我在这里有意义。

你能帮忙吗？提前谢谢。

Answer 1

这应该适合你：

$("#chk1, #chk2").click(function(){
    $("#chk3, #chk4").removeAttr("checked");
    $("#div1").show();
    $("#div2").hide();
});
$("#chk3, #chk4").click(function(){
    $("#chk1, #chk2").removeAttr("checked");
    $("#div2").show();
    $("#div1").hide();
});

只需在id定位的复选框中注册.click()处理程序即可。使用.removeAttr()取消选中其他框。然后使用.show()和.hide()显示正确的div。

<强> Code example on jsfiddle

Answer 2

<html>
<head>
  <style type="text/css">
    <!--
    .divstyle
    {
      display: none;
      border: 1px solid #000;
      height: 100px;
      width: 200px;
      margin: 10px 0 0 0;
    }
    .hidden {
      visibility: hidden;
      position: absolute;
    }
    -->
  </style>
</head>
<body>
<p>
  <input name="chk1" type="checkbox" id="chk1" class="first"/>
  Group1 Black
  <input name="chk2" type="checkbox" id="chk2" class="first"/>
  Group1 White
  <input name="chk3" type="checkbox" id="chk3" class="second"/>
  Group2 Red
  <input name="chk4" type="checkbox" id="chk4" class="second"/>
  Group2 Blue
</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
<script type="text/javascript">
  $('input').live("click", function () {
    var reset_class;
    var show_id;
    var hide_id;
    switch (this.className) {
      case 'first':
        reset_class = 'second';
        show_id = 'div1';
        hide_id = 'div2';
        break;
      case 'second':
        reset_class = 'first';
        show_id = 'div2';
        hide_id = 'div1';
    }
    $('.' + reset_class).attr('checked', false);
    $('#' + show_id).removeClass();
    $('#' + hide_id).addClass('hidden');
  });
</script>
</body>
</html>

Answer 3

这是完整的例子，

<html>
<head>
<style type="text/css">
<!--
.divstyle
{
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    margin: 10px 0 0 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#chk1, #chk2').click(function() {
            var show;
          $('#chk1, #chk2').each(function () {
            if ($(this).attr("checked")) {
                show = true;
                $('#div1').show();
                $('#div2').hide();
                $('#chk3, #chk4').attr("checked", false);
            }
          });
          if (!show)
            $('#div1').hide();
        });
        $('#chk3, #chk4').click(function() {
            var show;
          $('#chk3, #chk4').each(function () {
            if ($(this).attr("checked")) {
                show = true;
                $('#div1').hide();
                $('#div2').show();
                $('#chk1, #chk2').attr("checked", false);
            }
          });
          if (!show)
            $('#div2').hide();
        });
    });
</script>
</head>
<body>
<p>
<input name="chk1" type="checkbox" id="chk1"/> 
Group1 Black
<input name="chk2" type="checkbox" id="chk2"/>
Group1 White
<input name="chk3" type="checkbox" id="chk3"/>
Group2 Red
<input name="chk4" type="checkbox" id="chk4"/>
Group2 Blue</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
</body>
</html>

如何使用复选框显示div，并取消选中其他复选框的其他复选框

3 个答案: