0

我正在尝试创建域搜索表单。将有带有单个域名的复选框以及全选或搜索所有复选框。当点击它时，所有其他复选框都应该被选中，而在取消选中它时，所有其他复选框也应该被取消选中。现在这是我正在尝试使用的脚本，但由于某种原因它不起作用

脚本

<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>

全选工作正常，但是当我尝试将其采用到我正在处理的站点中时，它将无法正常工作。

4

1 回答 1

0

将 javascript 放在<head>您的 HTML 中，该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">
    .....
于 2012-08-03T13:34:44.200 回答