“全选”复选框不起作用

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

脚本

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

选择全部工作得很好，但是当我尝试把它采用到我正在做这个工作，不会工作的网站。

来源

2012-08-03 Rick Roy

将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"> 
    .....

来源

2012-08-03 13:34:44 amiregelz

我试图找出错误并创建了一个简单的HTML页面只是脚本和形式的内容，看看它的工作原理。但是当我在实际页面中实现它时，它不起作用。不明白为什么你可以查看它，如果我发送你想要实现这个代码的页面的链接？ – 2012-08-03 15:02:00

这里是我已经实现代码的页面的链接，但它不起作用[链接]（http://cheap-webhosting.co.in/check） – 2012-08-03 15:07:25

好吧，删除'style.css'文件解决了这个问题，所以我建议你研究一下'style.css'中的'checkbox'和'input'有关的任何内容，并可能干扰checkAll功能。 – amiregelz 2012-08-03 16:18:23

“全选”复选框不起作用

回答

相关问题