2

IDとCLASSを使用して特定のチェックボックスをオンまたはオフにする方法を知っています。しかし、Jqueryを使用してランダムに10個のチェックボックスを選択したいと思います。

毎回100、40、またはXX個のチェックボックスがあります。（HTMLチェックボックス）100チェックボックスまたは50チェックボックスなどの可能性があります。毎回違うでしょう。

ボタンを押したときにランダムに10個のチェックボックスをチェックしたい。ユーザーはこれらの10個のチェックボックスを手動で選択できます。または、ランダムボタンを押すだけでもかまいません。

私はJqueryを使用しています。

$(':checkbox:checked').length;

しかし、私はすべてのチェックボックスの長さを見つけたいので、10個のランダムなチェックボックスをチェックしたいと思います。

4

2 に答える 2

3

このようなものをお探しですか？

http://jsfiddle.net/qXwD9/

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script>
        //Creating random numbers from an array
        function getRandomArrayElements(arr, count) {
            var randoms = [], clone = arr.slice(0);
            for (var i = 0, index; i < count; ++i) {
                index = Math.floor(Math.random() * clone.length);
                randoms.push(clone[index]);
                clone[index] = clone.pop();
            }
            return randoms;
        }

        //Dummy array
        function createArray(c) {
            var ar = [];
            for (var i = 0; i < c; i++) {
                ar.push(i);
            }
            return ar;
        }

        //check random checkboxes
        function checkRandom(r, nodeList) {
            for (var i = 0; i < r.length; i++) {
                nodeList.get(r[i]).checked = true;
            }
        }

        //console.log(getRandomArrayElements(a, 10));

        $(function() {

            var chkCount = 100;
            //this can be changed

            var numberOfChecked = 10;
            //this can be changed

            var docFrag = document.createElement("div");

            for (var i = 0; i <= chkCount; i++) {
                var chk = $("<input type='checkbox' />");
                $(docFrag).append(chk);
            }

            $("#chkContainer").append(docFrag);

            $("#btn").click(function(e) {

                var chks = $('input[type=checkbox]');

                chks.attr("checked", false);

                var a = createArray(chkCount);
                var r = getRandomArrayElements(a, numberOfChecked);

                //console.log(r);

                checkRandom(r, chks);
            });

        });
    </script>

</head>
<body>        

    <div id="chkContainer"></div>
    <div>
        <input type="button" id="btn" value="click" />
    </div>

</body>

于 2012-08-17T12:14:41.503 に答える
1

これはどう：

作業例: http://jsfiddle.net/MxGPR/23/

HTML:

<button>Press me</button>
<br/><br/>
<div class="checkboxes">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

JAVASCRIPT (JQuery が必要):

$("button").click(function() {
    // How many to be checked?
    var must_check = 10;
    // Count checkboxes
    var checkboxes = $(".checkboxes input").size();
    // Check random checkboxes until "must_check" limit reached
    while ($(".checkboxes input:checked").size() < must_check) {
        // Pick random checkbox
        var random_checkbox = Math.floor(Math.random() * checkboxes) + 1;
        // Check it
        $(".checkboxes input:nth-child(" + random_checkbox + ")").prop("checked", true);
    }
});
于 2012-08-17T12:18:15.020 に答える