2

我知道如何用 ID 和 CLASS 选中和取消选中特定的复选框。但我想使用 Jquery 随机选择 10 个复选框。

我每次都会有 100,40 或 XX 个复选框。（HTML Checkbox）可能是 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 回答