为什么我的Javascript忽略了所选的复选框?

时间:2014-07-26 19:07:28

标签: javascript asp.net asp.net-mvc-3

我的页面底部有一个脚本,其中包含多个datepickersdropdownlists次和天。我想使用循环检查所选值的值。问题是代码只循环加载页面时检查的所选元素的初始数量。它将仅检测这些最初选择的元素的更改。它会忽略任何新选择的项目。此外,当我将脚本放在页面顶部时,它会忽略任何更改。

我已经尝试了大约一周的不同版本的代码。有人能帮助我发现可能是我的问题吗?谢谢你的帮助。

<script type="text/javascript">
    $(function () {

        $("#date").datepicker();
        $('input[name=date]').datepicker();
        var dateInput = $("select[name='searchString']");

        var checkedindex = [];
        var classdate = [];
        var classtime = [];
        var dayofclass = [];
        var newDateAndTime = [];
        var oldDateAndTime = [];

        $("input[name='selectedCourses']").each(function (i) {
            if (this.checked) {
                checkedindex.push(parseInt(i));
            }
        });

        for (var x = 0; x < checkedindex.length; x++) {
            var ind = checkedindex[x];

            var dateofclass = $(".TextBoxDate:eq(" + ind + ")");
            var timeofclass = $(".TextBoxTime:eq(" + ind + ")");
            var classday = $("select[name='searchString']:eq(" + ind + ")");

            classdate.push(dateofclass);
            classtime.push(timeofclass);
            dayofclass.push(classday);

            oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString();
        }

        $("#saveBtn").click(function () {

            for (var x = 0; x < checkedindex.length; x++) {
                var ind = checkedindex[x];

                var dateofclass = $(".TextBoxDate:eq(" + ind + ")");
                var timeofclass = $(".TextBoxTime:eq(" + ind + ")");
                var classday = $("select[name='searchString']:eq(" + ind + ")");

                classdate.push(dateofclass);
                classtime.push(timeofclass);
                dayofclass.push(classday);

                var testString = (dayofclass[x].val() + classtime[x].val()).toString();

                alert(testString + "  " + oldDateAndTime);

                oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString();
            }

            return false;
        });
    });
</script>

2 个答案:

答案 0 :(得分:0)

您只在脚本开头计算checkedindex一次。此数组仅包含脚本运行时选中的复选框。

我假设你想在点击#saveBtn元素时迭代选中的复选框?如果是这样,您需要重新计算checkedindex数组。

请注意您使用的选择器input[name='selectedCourses']。这会限制checkedindex数组仅包含已检查的复选框,其名称属性等于&#34; selectedCourses&#34;。

答案 1 :(得分:0)

单击保存按钮后应填充checkedindex数组,否则只包含加载页面时选择的元素。请尝试以下脚本。

<script type="text/javascript">
    $(function () {

        $("#date").datepicker();
        $('input[name=date]').datepicker();
        var dateInput = $("select[name='searchString']");

        $("#saveBtn").click(function () {

            var checkedindex = [];
            var classdate = [];
            var classtime = [];
            var dayofclass = [];
            var newDateAndTime = [];
            var oldDateAndTime = [];

            $("input[name='selectedCourses']").each(function (i) {
                if (this.checked) {
                    checkedindex.push(parseInt(i));
                }
            });

            for (var x = 0; x < checkedindex.length; x++) {
                var ind = checkedindex[x];

                var dateofclass = $(".TextBoxDate:eq(" + ind + ")");
                var timeofclass = $(".TextBoxTime:eq(" + ind + ")");
                var classday = $("select[name='searchString']:eq(" + ind + ")");

                classdate.push(dateofclass);
                classtime.push(timeofclass);
                dayofclass.push(classday);

                var testString = (dayofclass[x].val() + classtime[x].val()).toString();

                alert(testString + "  " + oldDateAndTime);

                oldDateAndTime = (dayofclass[x].val() + classtime[x].val()).toString();
            }

            return false;
        });
    });
</script>

谢谢!