Question

我正在创建一个页面，允许用户访问我网站的某个部分，如果他们按正确顺序点击25个复选框中的8个。

首先感谢Reigel的代码，它的方式比我最初开始的方式更好。

我的问题是，我可以优化javascript代码吗？例如，clearforms函数或其他任何东西。我是一个菜鸟，刚开始使用javascript工作3天前，所以任何建议都表示赞赏。

我的代码如下：

<body onLoad="clearForms()" onUnload="clearForms()">

 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>

<form id="form1" name="form1" method="post" action="check_combination.php">
<table width="200" border="1" align="center">

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="1" /></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="2"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="3"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="4"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="5"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="6"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="7"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="8"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="9"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="10"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="11"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="12"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="13"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="14"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="15"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="16"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="17"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="18"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="19"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="20"/></td>
</tr>

<tr>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="21"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="22"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="23"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="24"/></td>
 <td width="20" align="center" valign="middle"><input name="checkbox" type="checkbox" value="25"/></td>
</tr>

<tr>
 <td height="23" colspan="5" align="center" valign="middle" class="label"></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="button" value="Test length" id="test" /></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>

<tr>
 <td height="28" colspan="5" align="center" valign="middle"><input type="button" name="button" id="button2" value="Test hidden input value" /></td>
</tr>

</table>

<input name="result" type="hidden" id="result" />

</form>

</body>

和javascript：

function clearForms() {
    var i;
    for (i = 0; (i < document.forms.length); i++) {
       document.forms[i].reset();
    $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
    }
}


//initial checkCount of zero
var checkCount = 0;

//maximum number of allowed checked boxes
var maxChecks = 8;

$(document).ready(function() {

    $(':checkbox[name=checkbox]').click(function() {

        //update checkCount
        checkCount = $(':checked').length;

        if (checkCount >= maxChecks) {
            //alert('you may only choose up to ' + maxChecks + ' options');
            $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
        } else {
            $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
        }

        if (this.checked) {
            $("td.label").append('<label>' + this.value + ' </label>');
        } else {
            $("td.label").find(':contains(' + this.value + ')').remove();
        }

        $('input[name="result"]').val($("td.label").text());

    });


    $("#test").click(function() {
        alert($(':checked').length)
    });

    $('#button2').click(function() {
        alert($('input[name="result"]').val());
    });

});

这是Peter Ajtai建议的修改后的javascript（再次感谢！对于Peter和Reigel，我拿了原始代码并完全重写它以缩短它。）

function clearForms() {
    var i;
    for (i = 0; (i < document.forms.length); i++) {
       document.forms[i].reset();
    $(':checkbox[name=checkbox]:disabled').attr('disabled', false);

    }
}


//initial checkCount of zero
var checkCount = 0;

//maximum number of allowed checked boxes
var maxChecks = 8;

$(document).ready(function() {

clearForms();

var $nameCheckbox = $('input:checkbox[name=checkbox]');

    $nameCheckbox.click(function() {

        //update checkCount
        checkCount = $('input:checked').length;

        if (checkCount >= maxChecks) {
            //alert('you may only choose up to ' + maxChecks + ' options');
            $nameCheckbox.not(':checked').attr('disabled', true);
        } else {
            $nameCheckbox.filter(':disabled').attr('disabled', false);
        }

        if (this.checked) {
            $("td.label").append('<label>' + this.value + ' </label>');
        } else {
            $("td.label").find(':contains(' + this.value + ')').remove();
        }

        $('input[name="result"]').val($("td.label").text());

    });


    $("#test").click(function() {
        alert($('input:checked').length)
    });

    $('#button2').click(function() {
        alert($('input[name="result"]').val());
    });

});

Answer 1

有一件事突然袭来我......

为了加快使用速度：

$('input:checkbox[name=checkbox]')

而不是

$(':checkbox[name=checkbox]')

这是因为第一个版本仅查找input元素中的复选框，第二个版本查找所有元素的复选框。

查看为 this speed comparison 而创建的 this answer Nick Craver，以展示上述内容。

尽可能这样做，所以请使用$('input:checked')。

此外，您可以多次创建多个jQuery对象。

例如，您多次使用$(':checkbox[name=checkbox]')。每次重新创建相同的jQuery对象时，也是如此：

var $nameCheckbox = $('input:checkbox[name=checkbox]');
$nameCheckbox.click(function() {
    ...
       $nameCheckbox.not(':checked').attr('disabled', true);
    } else {
       $nameCheckbox.filter(':disabled').attr('disabled', false);
    ...

最后在语义上，删除内联javascript更有意义，所以替换：

<body onLoad="clearForms()" onUnload="clearForms()">

与

<body>

并将clearForm()放入jQuery doc中。 jQuery doc ready将在window.onload之前触发，因为onload必须等待所有图像等加载。当DOM准备就绪时，jQuery doc就会激活。你也可以使用window.onunload，但我不太明白为什么这是必要的。

$(document).ready(function() {
    clearForms();

这段代码可以优化吗？

1 个答案: