Выбрать только одно изображение checkbox

-1

Я сделал 3 изображения в CSS, я хочу выбрать только одно изображение, подобное переключателю, поэтому вы не можете выбрать более одного. Я не совсем уверен, как я могу добиться того, что, так мало помощь будет pleased.Thanks заранееВыбрать только одно изображение checkbox

Вот файл CSS и моя форма:

label:before { 
 
    content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png"); 
 
    position: absolute; 
 
    z-index: 100; 
 
} 
 
:checked+label:before { 
 
    content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png"); 
 
} 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
/*pure cosmetics:*/ 
 
image { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
label { 
 
    margin: 10px; 
 
}

<section> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <!-- section title --> 
 
\t \t <div class="col-md-12 text-center"> 
 
\t \t \t <span class="title-small text-uppercase letter-spacing-3 font-weight-600" style=" color: #da7e57;">Antipasto</span> 
 
\t \t \t <div class="separator-line-thick bg-black no-margin-bottom margin-one xs-margin-top-five"></div> 
 
\t \t </div> 
 
\t \t <!-- end section title --> 
 
\t </div> 
 
\t <section class="wow fadeIn blog-details-text" style="padding-top: 30px;padding-bottom: 30px"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="col-md-4 col-sm-6 checkboox"> 
 
\t \t \t \t <input type="checkbox" id="myCheckbox1" /> 
 
\t \t \t \t <label for="myCheckbox1" class="checkbox"> 
 
\t \t \t \t \t <img src="{{URL::asset('external_assets/assets/images/sangiovese.jpg') }}"> 
 
\t \t \t \t </label> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4 col-sm-6 checkboox"> 
 
\t \t \t \t <input type="checkbox" id="myCheckbox2" /> 
 
\t \t \t \t <label for="myCheckbox2" class="checkbox"> 
 
\t \t \t \t \t <img src="{{URL::asset('external_assets/assets/images/vintageTORTELLINIragu.jpg') }}"> 
 
\t \t \t \t </label> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-4 col-sm-6 checkboox"> 
 
\t \t \t \t <input type="checkbox" id="myCheckbox3" /> 
 
\t \t \t \t \t <label for="myCheckbox3" class="checkbox"> 
 
\t \t \t \t <img src="{{URL::asset('external_assets/assets/images/bolied_meat.jpg') }}"> 
 
\t \t \t </label> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section> 
 
</div> 
 
</section>

источник

2016-11-25 Erjon

Почему вы нарушаете ожидания своих пользователей и используете для этого флажок вместо радиоприемника? –

@DavidThomas, что вы предлагаете? – Erjon

Попробуйте поместите это в свой файл js

$('input[type="checkbox"]').on('change', function() { 
    $('input[type="checkbox"]').not(this).prop('checked', false); 
});

источник

2016-11-25 16:08:09 DariusD

спасибо, что вы человек. вот что я пытался сделать. – Erjon

Имейте в виду, что это позволяет проверять только один флажок на всей странице; вы должны - по крайней мере - выбрать только флажки с тем же свойством 'name'. –

@DavidThomas Да, вы правы, я пытался выбрать другое изображение в другом разделе, и он не работает, я не пытался делать это в разных разделах раньше. У вас есть какое-то решение? – Erjon

Определите тип ввода как RadioButtons. Если вам нужно сгруппировать их вместе, чтобы заставить их работать в качестве радиолюбителей, но чтобы сохранить текущий макет, свяжите их вместе с атрибутом «имя», который будет таким же. Пример: http://www.echoecho.com/htmlforms10.htm

источник

2016-11-25 16:10:19 Brinky

Выбрать только одно изображение checkbox

ответ

Смежные вопросы