当用户选择2个引导切换复选框时,我试图弹出一条消息。到目前为止我有这个设置:
我的HTML:
<div>
<p id="enable-msg"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<label for="cure">
<input type="checkbox" id="Checkbox1" onclick="showHide();" onchange="ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')" >
Criteria 1</label>
</div>
<div>
<p id="enable-msg2"><span class="glyphicon glyphicon-thumbs-up"></span></p>
<p id="disable-msg2"><span class="glyphicon glyphicon-thumbs-down"></span></p>
<input type="checkbox" id="Checkbox2" onchange="ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')" unchecked/>
<label for="shortTerm" class="control-label">Criteria 2</label>
<br>
<label class="curemsg green" id="Text1"> Message </label>
</div>
我的javascipt:
$('input[type="checkbox"]').click(function () {
$('.curemsg').hide();
if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) $('.curemsg').show();
});
$(document).ready(function() {
$("input#Checkbox1").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox1', 'enable-msg', 'disable-msg')
});
$(document).ready(function() {
$("input#Checkbox2").bootstrapSwitch({});
ToggleSwitchMessage('Checkbox2', 'enable-msg2', 'disable-msg2')
});
function ToggleSwitchMessage(checkId, firstCommentId, secondCommentId) {
var check_box = document.getElementById(checkId)
var first_alert = document.getElementById(firstCommentId);
var second_alert = document.getElementById(secondCommentId);
if (check_box.checked == true) {
first_alert.style.visibility = "visible";
first_alert.style.display = "inline-block";
second_alert.style.visibility = "hidden";
second_alert.style.display = "none";
} else {
first_alert.style.visibility = "hidden";
first_alert.style.display = "none";
second_alert.style.visibility = "visible";
second_alert.style.display = "inline-block";
}
}
我的CSS:
#enable-msg,
#enable-msg2 {
display: inline;
color: green;
}
#disable-msg,
#disable-msg2 {
display: inline;
color: red;
}
.curemsg {
display: none;
}
.green {
background: #00ff00;
}
这是我的Jsfiddle
最终我将有大约10个切换开关,但我希望能够在选择了2个特定的切换开关/复选框时显示消息。
谢谢