Как заменить радиокнопки на изображения с помощью jQuery?

Question

Как заменить радиокнопки на изображения с помощью jQuery?

0

У меня есть надбавка, которая выглядит так, это из CMS для электронной коммерции.

<input type="radio" name="id[9]" value="70" id="attrib-9-70"class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-70">SL01<br />
<img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" /></label>

<input type="radio" name="id[9]" value="71" id="attrib-9-71"class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-71">SL02<br />
<img src="images/attributes/SL02_thumb.jpg" alt="" width="100" height="100" /></label>

и т.д.

что я хотел бы сделать, чтобы пользователь мог щелкнуть изображение (тот, что находится на ярлыке, следующий за ним), вместо переключателя, и скрыть переключатель, который в настоящее время существует, или заменить его на образ.

это можно сделать с помощью jQuery? или, может быть, лучшие вопросы - как вы можете отправлять данные формы, подобные изображениям, а не переключателям?

TopTomato 29 апр. 2014, в 01:11

Источник

2

stackoverflow.com/questions/17541614/...
sfletche 28 апр. 2014, в 23:02
0

Добавьте обработчик события щелчка к изображению, относящемуся к переключателю, и попросите его выбрать радиовход. Радиовходы будут вести себя так же, но могут быть скрыты / не отображаться с помощью CSS.
gratz 28 апр. 2014, в 23:03

Теги:

javascript

jquery

forms

2 ответа

2

Оберните свой переключатель в свой ярлык следующим образом:

<label class="attribsRadioButton" for="attrib-9-70">
    <input type="radio" name="id[9]" value="70" id="attrib-9-70"class="threads-opts" />
    <img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" />
</label>

sfletche 28 апр. 2014, в 20:42

Ещё вопросы

Добавьте обработчик события щелчка к изображению, относящемуся к переключателю, и попросите его выбрать радиовход. Радиовходы будут вести себя так же, но могут быть скрыты / не отображаться с помощью CSS.

cvipul · Accepted Answer · 2014-04-28T22-15-00.000Z

Ответ sfletche верен, хотя вам не нужно обменивать радиокнопку внутри метки, она должна быть в том же виде.

Также, если вы хотите скрыть переключатель, используйте дисплей: нет или видимость: скрытый стиль.

<input type="radio" name="id[9]" value="70" id="attrib-9-70" class="threads-opts" />
<label class="attribsRadioButton" for="attrib-9-70">
    <img src="images/attributes/SL01_thumb.jpg" alt="" width="100" height="100" />
</label>

В вашем css используйте:

.threads-opts{
    display:none;
    visibility:hidden;
}