получить значение проверяемого бутстраповского флажка

У меня есть этот HTML-форма:получить значение проверяемого бутстраповского флажка

<div class="animated-switch"> 
    <input id="switch-success" name="switch-success" checked="" type="checkbox"> 
    <label for="switch-success" class="label-success"></label> 
</div>

Как я могу знать, если вход проверяется или нет?

Я попытался, как это, но ничего не насторожило:

$(document).on('click','.animated-switch',function(e){ 
    alert($('#switch-success:checked').val()); 
});

Здесь а JSFIDDLE файл, чтобы увидеть мой ясный пример: https://jsfiddle.net/s2f9q3fv/

источник

2016-08-25 Brave Type

http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery –

'если ($ ('# switch- success '). is (': checked ')) {' –

Возможный дубликат [Как проверить, установлен ли флажок в jQuery?] (http://stackoverflow.com/questions/901712/how-to-check- if-a-checkbox-is-check-in-jquery) –

Ваш код работает нормально в сниппет. Вы забыли добавить значение в свой флажок, но даже без него вы сможете увидеть сообщение с неопределенным значением (см. Ниже значение «test» было добавлено в фрагменте).

$(document).on('click','#switch-success:checked',function(e){ 
 
    alert($('#switch-success:checked').val()); 
 
});

.animated-switch > input[type="checkbox"] { 
 
    display: none; } 
 

 
.animated-switch > label { 
 
    cursor: pointer; 
 
    height: 0px; 
 
    position: relative; 
 
    width: 40px; } 
 

 
.animated-switch > label::before { 
 
    background: black; 
 
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); 
 
    border-radius: 8px; 
 
    content: ''; 
 
    height: 16px; 
 
    margin-top: -8px; 
 
    position: absolute; 
 
    opacity: 0.3; 
 
    transition: all 0.4s ease-in-out; 
 
    width: 40px; } 
 

 
.animated-switch > label::after { 
 
    background: white; 
 
    border-radius: 16px; 
 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); 
 
    content: ''; 
 
    height: 24px; 
 
    left: -4px; 
 
    margin-top: -8px; 
 
    position: absolute; 
 
    top: -4px; 
 
    transition: all 0.3s ease-in-out; 
 
    width: 24px; } 
 

 
.animated-switch > input[type="checkbox"]:checked + label::before { 
 
    background: inherit; 
 
    opacity: 0.5; } 
 

 
.animated-switch > input[type="checkbox"]:checked + label::after { 
 
    background: inherit; 
 
    left: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div class="animated-switch"> 
 
    <input id="switch-success" name="switch-success" checked="" value="test" type="checkbox"> 
 
    <label for="switch-success" class="label-success"></label> 
 
</div>

UPDATE: Вы должны связать событие нажатия на самом флажке, а не родитель. Попробуйте отрезать снова с причудливой анимацией. Обратите внимание, что если вы хотите, чтобы предупреждение всегда выполнялось, вам нужно удалить атрибут :checked в селекторе.

источник

2016-08-25 18:53:25 Chris

проверьте этот jsfiddle, и вы увидите, что это вызовите два теста undefined +: https://jsfiddle.net/s2f9q3fv/ –

это из-за добавленных стилей анимации. когда вы удаляете css, он запускает один за клик. – Chris

нужна анимация CSS ... иначе я не размещаю здесь. –

Доступен, если флажок установлен.

 $('#' + id).is(":checked")

источник

2016-08-25 18:55:30

Это не решило проблему, попробуйте здесь, на jsfiddle: https://jsfiddle.net/s2f9q3fv/ –

Попробуйте

$(".animated-switch").change(function() { 
    alert($('#switch-success:checked').val()); 
    });

источник

2016-08-25 19:10:07 badrb

получить значение проверяемого бутстраповского флажка

ответ

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