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>

select all は正常に機能していますが、サイトに採用しようとすると、作業中です。

4

1 に答える 1

0

<head>HTML の内部に JavaScript を配置すると、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 に答える