Показывать кнопку при аренде 1 флажок в списке отмечен флажками

Question

У меня есть код, который отлично работает;она отображает кнопку, когда флажок установлен.Но теперь я хочу что-то изменить, и в этом случае будет больше флажков (они генерируются содержимым базы данных, поэтому число неясно).

Но решение основано на идентификатореэлемент, имеющий несколько одинаковых идентификаторов, недействителен, и он не работает.

У меня есть код здесь: https://codepen.io/anon/pen/jKOLew?editors=1111. Как видите, только первый флажок включает div, второй - нет.'t.

Может кто-нибудь сказать мне, как решить эту проблему?

Код такой:

html:

<input type="checkbox" id="chkMessage" />Do you have Passport?<input type="checkbox" id="chkMessage" />Do you have Passport? <div id="dvMessage" style="display: none">Passport Number: <input type="text" /></div>`

И JavaScript:

`$(function() {  $("#chkMessage").click(function() {    if $(this).is(":checked")) {      $("#dvMessage").show();      $("#AddMessage").hide();    } else {      $("#dvMessage").hide();      $("#AddMessage").show();    }  });});`

Answer 1

Вы используете один и тот же id дважды.Предполагается, что id уникален.

Здесь я изменил его на класс, и теперь он работает просто отлично

$(function() {
  $(".chkMessage").click(function() {
    if ($(this).is(":checked")) {
      $("#dvMessage").show();
      $("#AddMessage").hide();
    } else {
      $("#dvMessage").hide();
      $("#AddMessage").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chkMessage" />Do you have Passport?
<input type="checkbox" class="chkMessage" />Do you have Passport?


<div id="dvMessage" style="display: none">
  Passport Number:
  <input type="text" />
</div>

---

Кроме того, если вы хотите убедиться, что кнопка отображается, когда установлен какой-либо флажок, вы можете сделать что-то вроде этого

$(function() {
  $(".chkMessage").click(function() {

      $("#dvMessage").hide();
      $("#AddMessage").show();

      $(".chkMessage").each(function() {

          if ($(this).is(":checked")) {
            $("#dvMessage").show();
            $("#AddMessage").hide();
          }
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chkMessage" />Do you have Passport?
<input type="checkbox" class="chkMessage" />Do you have Passport?


<div id="dvMessage" style="display: none">
  Passport Number:
  <input type="text" />
</div>

---

Если вы случайно не можете управлять отображаемым HTML, вы можете использовать селектор атрибутов [attribute="value"], чтобы захватывать элементы с одинаковыми id

$(function() {
  $("[id='chkMessage']").click(function() {

      $("#dvMessage").hide();
      $("#AddMessage").show();

      $("[id='chkMessage']").each(function() {

          if ($(this).is(":checked")) {
            $("#dvMessage").show();
            $("#AddMessage").hide();
          }
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkMessage" />Do you have Passport?
<input type="checkbox" id="chkMessage" />Do you have Passport?


<div id="dvMessage" style="display: none">
  Passport Number:
  <input type="text" />
</div>