好的,所以我有一个基本的复选框列表如下:
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="lowercase" id="lowercase" checked="true"> lowercase letters
</label>
<label class="checkbox">
<input type="checkbox" name="uppercase" id="uppercase"> UPPERCASE LETTERS
</label>
<label class="checkbox">
<input type="checkbox" name="digits" id="digits"> Digits 0 to 9
</label>
<label class="checkbox">
<input type="checkbox" name="symbols" id="symbols"> Punctuation / Symbols <small>(e.g. % $ & * ! ... ) </small>
</label>
<label class="checkbox">
<input type="checkbox" name="ascii" id="ascii"> All ASCII Characters
</label>
</div>
</div>
当选中每个复选框时,它所在的表单通过ajax提交到calc.php。如果选中或未选中复选框,则部分calc将使用我指定的值,如下所示:
if (isset($_POST['lowercase'])) {
$numChars += 26;
}
if (isset($_POST['uppercase'])) {
$numChars += 26;
}
if (isset($_POST['digits'])) {
$numChars += 10;
}
if (isset($_POST['symbols'])) {
$numChars += 12;
}
if (isset($_POST['ascii'])) {
$numChars = 96;
}
因此,您将看到用户是否选择了多个复选框,它会在var numChars中添加相应的值。如果用户选择“全部ASCII”,则var应该具有固定值96,因为这是我感兴趣的可用ascii字符的数量。我使用此论坛上其他位置找到的代码来删除对方的检查如果选中'ascii'框,则输入框。
$(function () {
var el = $('input:checkbox');
el.on('change', function (e) {
if ($(this).attr('id') != 'ascii') {
if ($(this).is(':checked'))
$('#ascii').prop('checked', false);
else {
var l = $(':checkbox')
.filter(':checked')
.not('#ascii').length;
if (l == 0)
$('#ascii').prop('checked', true);
}
} else {
if ($(this).is(':checked'))
el.not($(this)).prop('checked', false);
}
});
});
一切正常。除了一部分。如果我选择'小写'然后numChars是26.如果我然后选择'大写'然后numChars正确是52.等。如果我选择'ascii'numChars转到96.但是如果我选择其他任何东西,比如'uppercase'numChars尽管屏幕上有复选框更新,但仍保持在96。它只在我选择'ascii'后才会发生,所以无论我在它之后按什么,只需再次点击即可更新numChars的值。
希望这是有道理的。尽管阅读/ echo / html示例,我试图制作一个jsfiddle,但仍然在ajax方面挣扎.. :-)
答案 0 :(得分:1)
根据您的要求,您必须将操作代码更改为:
$numChars = 0;
if (isset($_POST['ascii'])) {
$numChars = 96;
}
else
{
if (isset($_POST['lowercase'])) {
$numChars += 26;
}
if (isset($_POST['uppercase'])) {
$numChars += 26;
}
if (isset($_POST['digits'])) {
$numChars += 10;
}
if (isset($_POST['symbols'])) {
$numChars += 12;
}
}
答案 1 :(得分:1)
搞定了!!
不敢相信这就是这么简单......不是全部。
我有这段代码:
// submit the form when boxes ticked
$(':checkbox').change (function () {
$("#pForm").submit();
});
功能上方:
$(function(){
var el = $('input:checkbox');
el.on('change', function(e){
if($(this).attr('id')!='ascii')
{
if($(this).is(':checked'))
$('#ascii').prop('checked', false);
else
{
var l = $(':checkbox')
.filter(':checked')
.not('#ascii').length;
if (l == 0)
$('#ascii').prop('checked', true);
}
}
else
{
if ($(this).is(':checked'))
el.not($(this)).prop('checked', false);
}
});
});
将它移到底下会产生差异!