Question

我有两个单选按钮，每个单选按钮都有一个图像。现在我希望如果你点击一个图像，单选按钮的状态也改变了。这是html代码：

        @if (Html.GebruikerContext().Klant.LogoIDSpecified)
        {
            <div class="property wide extra-margin">
                <label>
                    Kies header logo
                </label>
                <div class="email-logo">
                    <div class="email-logo-image">
                        <a href=""> <img src='/Beheer/Images/mainlogo_274x122.png' />      </a>


                        <div class="email-logo-button">
                            <label>
                                @Html.RadioButton("logo-selectie", "standaard", !Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                                <span>standaard logo</span>
                            </label>
                        </div>
                    </div>

                </div>



                <div class="email-logo">
                    <div class="email-logo-image">
                        <img src='/Beheer/Document/Download?documentID=@(Html.GebruikerContext().Klant.LogoID)' />
                    </div>
                    <div class="email-logo-button">
                        <label>
                            @Html.RadioButton("logo-selectie", "klant", Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                            <span>eigen logo</span>
                        </label>
                    </div>
                </div>
            </div>
        }

这是单选按钮的javascript代码：

 $('#logo-selectie[value=standaard]').click(function () {
            $('#GebruikKlantLogo').val(false);
        });

        $('#logo-selectie[value=klant]').click(function () {
            $('#GebruikKlantLogo').val(true);
        });

Answer 1

不涉及JS代码的简单方法是修改HTML，以便<label>元素包含单选按钮和图像，如下所示：

<div class="property wide extra-margin">
  <label>
    Kies header logo
  </label>
  <div class="email-logo">
    <div class="email-logo-image">
      <label>
        <img src='/Beheer/Images/mainlogo_274x122.png' />
        <div class="email-logo-button">
          @Html.RadioButton("logo-selectie", "standaard", !Model.GebruikKlantLogo, new { @name = "logoKeuze" })
          <span>standaard logo</span> 
        </div>
      </label>
    </div>
  </div>

  <div class="email-logo">
    <label>
      <div class="email-logo-image">
        <img src='/Beheer/Document/Download?documentID=@(Html.GebruikerContext().Klant.LogoID)' />
      </div>
      <div class="email-logo-button">
        @Html.RadioButton("logo-selectie", "klant", Model.GebruikKlantLogo, new { @name = "logoKeuze" })
        <span>eigen logo</span>
      </div>
    </label>
  </div>
</div>

然后，您可以修改您的jQuery事件处理程序以使用change事件，这对于可访问性更好：

$('#logo-selectie[value=standaard]').change(function () {
  $('#GebruikKlantLogo').val(false);
});

$('#logo-selectie[value=klant]').change(function () {
  $('#GebruikKlantLogo').val(true);
});

如果单击图像，则更改状态单选按钮

1 个答案: