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

debugcn 发表于 Dev

SavantKing 橙

我有两个单选按钮，每个单选按钮都有一个图像。现在我希望如果您单击单选按钮状态也发生变化的图像。这是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);
        });

罗里·麦克罗森

不涉及 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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。