Проверьте состояние кнопок-checkbox

Я хочу установить флажок, который выглядит как кнопка: когда он установлен, кнопка выглядит нажатой; когда он не установлен, кнопка выглядит не нажатой.Проверьте состояние кнопок-checkbox

Как я использую бутстрап, естественно, я думаю об использовании data-toggle="buttons-checkbox". Но проверить состояние флажка не представляется возможным. Например, .prop('checked'), похоже, не работает в следующем коде.

$('#input-checkbox').click(function() { 
 
    if ($("#input-checkbox").prop('checked')) { 
 
     alert("yes"); 
 
    } else { 
 
     alert("no"); 
 
    } 
 
    });

<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
 
    <button type="button" class="btn btn-default active" id="input-checkbox">INPUT</button> 
 
    </div> 
 
</body>

Кто-нибудь знает, что случилось там?

источник

2016-12-24 Anonymous

Добавить value атрибут вашей кнопки. Я изменил btn-default на btn-primary и добавил нормальную кнопку на стороне, чтобы указать разницу.

$('#input-checkbox').click(function() { 
 
    if ($("#input-checkbox").attr('value')=="checked"){ 
 
     $("#input-checkbox").attr('value','notchecked'); 
 
     $("#input-checkbox").removeClass('active'); 
 
    } 
 
    else { 
 
     $("#input-checkbox").attr('value','checked'); 
 
     $("#input-checkbox").addClass('active'); 
 
    } 
 
    });

.btn:focus,.btn:active { 
 
    outline: none !important; 
 
}

<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
 
    <button type="button" class="btn btn-primary active" value="checked" id="input-checkbox">INPUT</button> 
 
    <button type="button" class="btn btn-primary"> NPUT</button> 
 
    </div> 
 
</body>

источник

2016-12-24 04:46:52 ab29007

@Thomas ли это решить проблему? если да, тогда вы можете принять ответ. – ab29007

Это действительно работает ... Но я очень удивлен, что нам нужно добавить самоопределяемый атрибут «значение» для «флажка». –

хорошо, мы могли бы заставить его работать другим способом. но переключение классов не очень хорошо, когда нам нужно удерживать состояние, пока происходят другие функции или события. можете ли вы, пожалуйста, принять ответ. – ab29007

ответ

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