Радиокнопки и jQuery

Question

У меня есть следующие радиокнопки, отображаемые в MVC:

<div class="radio" id="ModelViewAd.TypeOfAd">
 <input checked="checked" id="ModelViewAd.TypeOfAd_Ad" name="ModelViewAd.TypeOfAd.SelectedValue" type="radio" value="Ad" />
 <label for="ModelViewAd.TypeOfAd_Ad">Annons</label><br>
 <input id="ModelViewAd.TypeOfAd_Auktion" name="ModelViewAd.TypeOfAd.SelectedValue" type="radio" value="Auktion" />
 <label for="ModelViewAd.TypeOfAd_Auktion">Auktion</label><br>
</div>

Теперь мне нужно скрыть элемент id = divEndDate на основе значения в радиогруппе.

Я пробовал это:

$(document).ready(function () {

        $("#TypeOfAd_Auktion").click(function () {
            if ($(this).checked) {
                $("divEndDate").css("visibility", "visible");
            }
            else {
                $("divEndDate").css("visibility", "hidden");
            }
        });

        $("#ModelViewAd.TypeOfAd_Ad").click(function () {
            if ($(this).checked) {
                $("divEndDate").css("visibility", "hidden");
            }
            else {
                $("divEndDate").css("visibility", "visible");
            }
        });
    });

Теперь один из них срабатывает при переключении между переключателями? Как это решить?

Answer 1

Вам нужно несколько исправлений:

$("#TypeOfAd_Auktion")
//should be:
$("#ModelViewAd\\.TypeOfAd_Auktion")

$(this).checked
//should be:
this.checked

$("#ModelViewAd.TypeOfAd_Ad")
//should be:
$("#ModelViewAd\\.TypeOfAd_Ad")

А это:

$("divEndDate")
//should be:
$("#divEndDate")

При использовании . в идентификаторе его необходимо экранировать, чтобы он не обрабатывался как класс, например: \\. Кроме того, если вам не нужно visibility для заполнения пространства на странице, даже когда оно скрыто вместо этого используйте display, тогда вы можете сократить код до этого:

$("#ModelViewAd\\.TypeOfAd :radio").change(function () {
    $("#divEndDate").toggle(this.checked && this.value == 'Ad');
});

Вы можете посмотреть демо здесь , это не включает никаких изменений в вашем HTML, только сценарий.

Answer 2

попробуйте следующее

$(document).ready(function () { 
  $('input:radio[name="ModelViewAd.TypeOfAd.SelectedValue"]').click(function() {
    this.id == 'ModelViewAd.TypeOfAd_Ad'?
      $("#divEndDate").show() : $("#divEndDate").hide();

  });
});

Мы привязываем один и тот же обработчик событий щелчка к обоим радиовходам, а затем проверяем идентификатор внутри функции. В зависимости от этого значения идентификатора мы либо показываем, либо скрываем <div> с датой окончания.

Вот Рабочая демоверсия