Question

我正在尝试创建域名搜索表单。将出现带有单个域名的复选框以及全选或全部搜索复选框。单击它时，应选中所有其他复选框，取消选中后，所有其他复选框也应取消选中。现在这里是我试图使用的脚本但由于某种原因它不会工作

脚本

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
        <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){

$("#checkAll").change(function() {
    $(":checkbox").attr("checked", this.checked);
});
$(".others").change(function() {
    if (!$('input.others[type=checkbox]:not(:checked)').length)
        $("#checkAll").attr('checked', true);
    if (!$('input.others[type=checkbox]:checked').length)
        $("#checkAll").attr('checked', false);
});
});//]]>

HTML部分

<div class="tran_form">
                    <form id="form3" action="whmcs/cart.php?a=add&domain=register" method="post">
                    <input type="hidden" name="token" value="52fe670c7c55b28b9e76c677afd97580147cbb5e" />
                        <fieldset class="d-block">
                            <div class="margin-bot">
                                <div class="inp_title">www.</div>
                                <label class="input-1">
                                    <input type="text" name="sld">
                                </label>
                                <a href="#" class="button-2" onClick="document.getElementById('form3').submit()">Search Now!</a>
                                <div class="clear"></div>
                            </div>
                            <div class="wrapper">
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".in" class="others">
                                    <label>.in</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".com" class="others">
                                    <label>.com</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".net" class="others">
                                    <label>.net</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".org" class="others">
                                    <label>.org</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".biz" class="others">
                                    <label>.biz</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" name="tlds[]" value=".info" class="others">
                                    <label>.info</label>
                                </div>
                                <div class="col-1">
                                    <input type="checkbox" id="checkAll">
                                    <label class="reg2 color-1">Search All</label>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>

知道我做错了什么吗？似乎不起作用。当我使用这个脚本的低调版本时，如下所示

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#checkAll").change(function() {
$(":checkbox").attr("checked", this.checked);
});
$(".others").change(function() {
    if (!$('input.others[type=checkbox]:not(:checked)').length)
        $("#checkAll").attr('checked', true);
    if (!$('input.others[type=checkbox]:checked').length)
        $("#checkAll").attr('checked', false);
});
});//]]> 
</script>
</head>
<body> 
<div>
<input type="checkbox" value="" id="checkAll">
<input type="checkbox" value="a" class="others">
<input type="checkbox" value="b" class="others">
<input type="checkbox" value="c" class="others">
</div>
</body>
</html>

选择所有工作正常，但当我尝试将其采用到网站我正在努力它不会工作。

Answer 1

将javascript放在HTML的<head>内，checkAll功能正常运行。 JSFIDDLE

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'>
  </script>
  <script type="text/javascript">//<![CDATA[ 
    $(window).load(function(){
    $("#checkAll").change(function() {
    $(":checkbox").attr("checked", this.checked);
    });
    $(".others").change(function() {
        if (!$('input.others[type=checkbox]:not(:checked)').length)
            $("#checkAll").attr('checked', true);
        if (!$('input.others[type=checkbox]:checked').length)
            $("#checkAll").attr('checked', false);
    });
    });//]]>
  </script>
</head>

<body>
  <div class="tran_form">
    .....

“全选”复选框无效

1 个答案: