Toggle/Checkbox внутри кнопки

У меня есть переключатель из bootstraptoggle.com, и я положил его внутри кнопки. Он работает в Chrome, но не в Firefox. Как я могу найти его, когда при нажатии кнопки он переключает переключатель или флажок, чтобы проверить и проверить, когда нажата кнопка. Мне нужна функция jquery, которая проверяет и отменяет после каждого щелчка.Toggle/Checkbox внутри кнопки

JSP:

<button id="topology_button" type="button" 
          class="btn btn-default">Portfolio 
           <input type="checkbox" class="expander" id="toggle" 
            data-on="Portfolio" data-off="Topology" checked 
            data-toggle="toggle" data-onstyle="success"> 
          Topology 
         </button>

Вот Jquery, я бы добавить. Поэтому каждый нечетный щелчок снимет флажок/переключить.

$(document).ready(function() { 
$('#toggle').change(function() { 
    if (this.checked) 
     $('#project-list-area').fadeIn('slow'), 
     $('#topology').fadeOut('slow'); 
    else 
     $('#topology').fadeIn('slow'), 
     $('#project-list-area').fadeOut('slow'); 
});

});

источник

2016-10-17 Stephen Popovich

Ввод элементов ввода внутри элементов кнопки является довольно странным в целом. Разве нет лучшего способа реализовать то, что это должно представлять? (Кстати, Java! = JavaScript.) – nnnnnn

Что это связано с Java? –

Измените переключатель на событии клика кнопки. Также это обычный HTML-код для нашей озабоченности, Java/JSP-тег не нужен. –

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('#toggle').change(function() { 

    if (this.checked) 
{ 

     $('#project-list-area').fadeIn('slow'); 
     $('#topology').fadeOut('slow'); 
} 
    else 
{ 

     $('#topology').fadeIn('slow'); 
     $('#project-list-area').fadeOut('slow'); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<button id="topology_button" type="button" 
          class="btn btn-default">Portfolio 
           <input type="checkbox" class="expander" id="toggle" 
            data-on="Portfolio" data-off="Topology" checked 
            data-toggle="toggle" data-onstyle="success"> 
          Topology 
         </button> 

<div id='project-list-area'> 
project-list-area 
</div> 
</body> 
</html>

источник

2016-10-18 04:04:08 Aswathy

Что вы изменили? я не вижу разницы ... –

Toggle/Checkbox внутри кнопки

ответ

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