BS2 Toggle Radio Btn
Show and hide input fields based on toggle button value
by TheOrdinaryGeek
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="http://bootstrapdocs.com/v2.0.4/docs/assets/js/bootstrap-button.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input type="checkbox" value='1' name="test" id="test">
<hr>
<div id="advanced">
<form>
<input type="text" name="one">
<input type="text" name="two">
</form>
</div>
JavaScript
function checkValues() {
if ($('#advanced').find('input:text').val() !== '') {
clearInput();
} else {
$("#advanced").hide();
}
}
function clearInput() {
var txt;
var r = confirm("You sure you want to remove these values?");
if (r == true) {
resetValues();
$("#advanced").hide(500);
} else {
console.log('keep values and box open');
$('#test').bootstrapToggle('on');
}
}
function resetValues() {
$('#advanced').find('input:text').val('');
}
$(function() {
$('#test').bootstrapToggle({
on: 'Hide',
off: 'Show',
onstyle: 'danger'
});
$("#advanced").hide();
$('#test').change(function() {
if ($(this).prop('checked') == true) {
$("#advanced").show(500);
}
if ($(this).prop('checked') == false) {
checkValues();
}
});
})