-2

我有一个带有复选框的视图，动态生成的，以及一个用于检查/取消所有复选框的按钮。我尝试下面的代码，但是，复选框未选中 ob 按钮单击事件。请帮忙。谢谢你。

用复选框查看： 

 <button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
    @for (int i = 0; i < @Model.workDaysList.Count; i++)
        {
              <div class="framed">
                 <div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
                   <h3>
                            <div class="ui-checkbox" id="checkbox">
                                <input type="checkbox" id="@Model.workDaysList[i][0]" />
                                <span class="ui-btn-text">
                                    <label for="@Model.workDaysList[i][0]" data-theme="c">
                                        @Model.workDaysList[i][1].Substring(6, 2)/@Model.workDaysList[i][1].Substring(4, 2)/@Model.workDaysList[i][1].Substring(0, 4)
                                    </label>
                                </span>
                                </div>
                            </h3>
                            @Model.detailDaysList[i][0] / @Model.detailDaysList[i][1]
                            <br />
                            @Model.detailDaysList[i][2] / @Model.detailDaysList[i][3]
                            <br />
                            @Model.detailDaysList[i][4] h
                        </div>
                    </div>
                </div>
           }

jQuery代码：

<script type="text/javascript">
     $(document).ready(function () {
       $("#selectinvert").click(function () {
       $("INPUT[type='checkbox']").each(function () {
                    if (this.checked == false) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                });
          });
    });
    </script>
4

6 回答 6

3

试试这个：

<script lang='javascript'>
 $(document).ready(function(){
     $('#selectinvert').click(function(){
         $("input[type='checkbox']").each(function (){
             if($(this).is(':checked')){
                 $(this).prop('checked', false);
             }else{
                 $(this).prop('checked', true);
             }
        });
     })
 });
</script>
于 2012-10-22T08:10:50.023 回答
2

有关闭 }) 丢失..

顺便说一句：切换可以这样写：

this.checked = !this.checked
于 2012-10-22T07:49:22.160 回答
2

尝试从基本的 HTML 代码开始并以此为基础！您的模型代码可能会影响您的 HTML。你可以在这里找到工作原型！

<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
    <div class="ui-checkbox" id="checkbox">
        <input type="checkbox" id="@Model.workDaysList[i][0]" />
        <span class="ui-btn-text">First</span>
    </div>
    <div class="ui-checkbox" id="checkbox">
        <input type="checkbox" id="@Model.workDaysList[i][0]" />
        <span class="ui-btn-text">Second</span>
    </div>
</div>

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

    $("INPUT[type='checkbox']").each(function() {
        if (this.checked == false) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    });
});
于 2012-10-22T08:15:26.580 回答
1

正如其他人所建议的那样，您缺少右括号。

您还可以稍微缩短代码：

$("#selectinvert").click(function() {
    $("input[type='checkbox']").each(function() {
        this.checked = !this.checked;
    });
});

另请注意，您的问题与 ASP.NET 或 jQuery UI 无关。​</p>

于 2012-10-22T07:54:20.493 回答
1

尝试

 $("#selectinvert").click(function () {
 $("INPUT[type='checkbox']").each(function () {
                if (!$(this).is(":checked")) {
                    $(this).attr('checked','checked');
                } else {
                    $(this).removeAttr('checked','checked');
                }
                })
            });
于 2012-10-22T07:55:08.027 回答
1

我认为您编写的代码仅在选中或未选中所有复选框时才有效。 What happens when some of them are checked..您的代码只会切换那些..

您的逻辑应该取决于按钮而不是复选框..

$(document).ready(function() {
    var isChecked = false;
    $("#selectinvert").click(function() {
        var $checkboxes = $("INPUT[type='checkbox']") ;
        if(isChecked){
            isChecked = false;
        }
        else{
            isChecked = true;
        }
        $checkboxes.prop('checked' , isChecked);
    });
});​
于 2012-10-22T08:01:12.910 回答