Question

我在MVC中呈现了以下radiobuttons：

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

现在我需要根据radiogroup上的值隐藏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")

在ID中使用.时，需要对其进行转义，因此不会将其视为类，如下所示：\\.此外，除非您需要visibility占用空间即使隐藏了该页面，也可以使用display代替，然后您可以将代码缩短为：

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

You can view a demo here，这不包括对HTML的修改，只包括脚本。

Answer 2

尝试以下

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

  });
});

我们将相同的click事件处理程序绑定到两个无线电输入，然后检查函数内部的id。根据此ID值，我们会显示或隐藏带有结束日期的<div>。

这是 Working Demo

单选按钮和jQuery

2 个答案: