1

私がやろうとしていることは：

1つ以上のチェックボックスが選択されている場合はcboResearch、btnResearch

私にとってトリッキーな部分は、チェックボックスの名前がループに基づいていることです。要約すると、私はそれを持ちたいと思います：

  • 1つ以上のボックスがチェックされている場合は、ドロップダウンメニューとボタンを表示します
  • すべてのチェックボックスがオフになっている場合は、ドロップダウンメニューとボタンを非表示にします

以下にレコードセットコード以外のすべてを提供しました。質問の核心にはそれで十分だと思います。

<head>
    <!--Jquery drop down menu add-on-->
    <script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.dd.js"></script>
    <script language="javascript">
        $(document).ready(
        function() {
            //JQuery code for drop-down menus  
            try {
                oHandler = $(".mydds").msDropDown().data("dd");
                $("#ver").html($.msDropDown.version);
            } catch (e) {
                alert("Error: " + e.message);
            }
        });

        //Function to select all check boxes.
        $(function() {
            $('.checkall').click(function() {
                $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
            });
        });
    </script>
</head>
<body>
    <form>
        <fieldset>
            <p>Select All
                <input type="checkbox" name="cbSelectAll" id="cbSelectAll" class="checkall">
            </p>
            <% Dim iX iX=0 Do While Not RS.EOF iX=i X + 1 %>
                <p>
                    <input type="checkbox" name="cbSelection<%=iX%>" id="cbSelection<%=iX%>"
                    />
                </p>
            <% RS.MoveNext Loop %>
            <p>
                <select name="cboResearch" id="cboResearch">
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                </select>
            </p>
            <p>
                <input name="btnResearch" type="button" class="button" value="Research" />
            </p>
        </fieldset>
    </form>
</body>
4

2 に答える 2

1

コードを更新していただきありがとうございます。繰り返されるものと繰り返されないものが明確になりました。

私が使用しているすべてのチェックボックスを選択するために、^=jQueryの属性はセレクターで始まります

チェックボックスの状態を検査し、それに基づいて必要な要素を非表示または表示するチェックボックスの変更イベントにバインドできます。

また、その状態を調べて、ページの読み込み時や、chack-allがオン/オフになっているときにそれに反応する必要があります。スクリプト全体にコメントを追加して、何が何であるかを確認できるようにしました。

補足：チェックされた状態が削除されると属性が失われるため、チェックオールが期待どおりに機能しません。2回目はチャックオールが機能しません。以下のデモでも修正しました

デモ-チェック時にドロップダウン/ボタンを表示し、そうでない場合は非表示にします

DEMOは次のスクリプトを使用します。

//If one or more boxes are checked, display dropdown menu and button
//If all check boxes are unchecked, hide dropdown menu and button

// cache the jquery reference to the checkboxes
// Note the ^= in the jQuery selector below selects all elements with a name attribute which starts with `cboSelection`
var $checkboxes = $("input:checkbox[name^='cbSelection']");

// Declare a function which will process the logic when executed
var processControlState = function(){
    var anyCheckBoxSelected = false;

    // iterate through all checkboxes and check if any of them is checked
    $checkboxes.each(function(){
        if(this.checked){
            // indicate we found a checkbox which is checked
            anyCheckBoxSelected = true;

            // exit the each loop, we found one checked which is enough
            return false;
        }
    });


    // check, if we found a checkbox which was checked
    if(anyCheckBoxSelected){
        // yes we did, show the controls
        $("#cboResearch").show();
        $("input[name='btnResearch']").show();
    }
    else{
        // no we have not, hide the controls
        $("#cboResearch").hide();
        $("input[name='btnResearch']").hide();
    }
};

// execute this method on load to ensure you start off in the correct state
processControlState();

// execute processControlState when a checkbox state is changed
$checkboxes.change(function(){
    processControlState();
})

// add call to processControlState aslo to the chack-all checkbox
$('.checkall').click(function () {
    //$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

    // simply set the other checkboxe's state to this one
    $checkboxes.prop("checked", this.checked);

    // then also call method to ensure the controls are shown/hidden as expected
    processControlState();
});

デモからのHTML

<form>
    <fieldset>
        <p>Select All
            <input type="checkbox" name="cbSelectAll" id="cbSelectAll" class="checkall">
        </p>
        <p>
            <input type="checkbox" name="cbSelection1" id="cbSelection1" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection2" id="cbSelection2" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection3" id="cbSelection3" />
        </p>
        <p>
            <input type="checkbox" name="cbSelection4" id="cbSelection4" />
        </p>
        <p>
            <select name="cboResearch" id="cboResearch">
                <option value="1">option1</option>
                <option value="2">option2</option>
            </select>
        </p>
        <p>
            <input name="btnResearch" type="button" class="button" value="Research"
            />
        </p>
    </fieldset>
</form>
于 2013-02-04T23:06:45.387 に答える
0

考えられる解決策

-> ur idは自動生成されるため、自動生成されたチェックボックスにクラスを追加します

<input type="checkbox" name="cbSelection<%=iX%>" id="cbSelection<%=iX%>" class="test"/>

->チェックされているチェックボックスの数を取得し、必要なことをすべて実行します

 $(document).ready(function () {
            $('.cbs').click(function () {
                if($('input.test').filter(':checked').length>0)
                  {
                       //show ur controls
                   }
    else
    {
    //hide controls
    }
        });
    });
于 2013-02-04T22:00:24.193 に答える