Как показать div с флажками и снять другие флажки с другим флажком - PullRequest
Новая
       0

Как показать div с флажками и снять другие флажки с другим флажком

1 голос
/ 22 апреля 2011

Привет, я новичок в javascript и jquery и абсолютно не знаю, что я делаю. У меня есть 4 флажка. От 1 до 4. Мне нужно иметь 1 и 2 флажки, когда один или оба флажка показывают скрытый # div1 и снимает флажки 3 и 4 (если они отмечены) и скрывает div2, если отображается. Затем флажки 3 и 4, когда один или оба флажка показывают скрытый # div2 и снимают флажки 1 и 2 (если они отмечены) и скрывают div1, если показан.

Вот мой HTML без JavaScript. попробовал, но я не слишком хорош в этом. 

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

Я надеюсь, что здесь есть смысл.

Можете ли вы, ребята, помочь? Заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 22 апреля 2011

Это должно работать для вас: 

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

Просто зарегистрируйте обработчик .click() для своих флажков, на которые нацелен id. Используйте .removeAttr(), чтобы снять другие флажки. Затем используйте .show() и .hide(), чтобы отобразить правильный div.

Пример кода на jsfiddle

1 голос
/ 22 апреля 2011

Вот полный пример, 

<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>
1 голос
/ 22 апреля 2011 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...