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

ProgramBox

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

Post author:admin
Запись опубликована:16 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #checkbox

#javascript #jquery #флажок

Вопрос:

Привет, я новичок в 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>

Я надеюсь, что я здесь что-то понимаю.

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

Ответ №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();
});

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

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

1. Боже, это было довольно быстро! Спасибо, я попробую это и вернусь со своими комментариями.

2. Да, это прекрасно работает в chrome, Firefox и ie. Просто идеально. Теперь я могу лучше стилизовать внешний вид в css должным образом. Большое тебе спасибо, Марк.

3. @wolverene, поскольку это ответ на ваш вопрос, пожалуйста, выберите его в качестве правильного ответа.

4. Хорошо, я повозился с этим ответом и другими. Я не очень хорош в javascript и, возможно, это не мое лучшее суждение. Но я чувствую, что это самый короткий и простой в реализации.

5. Я немного изменил несколько, и затем это отлично сработало вместе с моим css и прочим. Я изменил отображение и скрытие с помощью slideUp и slideDown для приятного эффекта, не становясь слишком затейливым, и это выполняет свою работу. Потрясающе. Я многому научился из этого небольшого опыта. Я имею в виду многое, что я узнал из всех других сообщений. stackoverflow потрясает!!!

Ответ №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>

Ответ №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>