Question

我有一个带有复选框的视图，动态生成，以及一个用于chech / unchek所有复选框的按钮。我尝试下面的代码但是，复选框没有被检查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>

Answer 1

试试这个：

<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>

Answer 2

有关闭}）失踪..

btw：切换可以这样写：

this.checked = !this.checked

Answer 3

尝试从基本的HTML代码开始并在此基础上构建！您的型号代码可能会制动您的HTML。你可以找到工作原型here！

<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;
        }
    });
});

Answer 4

正如其他人所说，你错过了右括号。

你也可以稍微缩短你的代码：

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

另请注意，您的问题与ASP.NET或jQuery UI无关。

Answer 5

试

 $("#selectinvert").click(function () {
 $("INPUT[type='checkbox']").each(function () {
                if (!$(this).is(":checked")) {
                    $(this).attr('checked','checked');
                } else {
                    $(this).removeAttr('checked','checked');
                }
                })
            });

Answer 6

我认为您编写的代码仅在选中或取消选中所有复选框时才有效。 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);
    });
});

选中/取消选中所有复选框（动态生成）

6 个答案: