Javascript 选中/取消选中所有复选框(动态生成)
我有一个动态生成的带有复选框的视图,以及一个用于选中/取消选中所有复选框的按钮。我尝试下面的代码,但是,复选框没有被选中。请帮忙。 多谢各位 使用复选框查看:Javascript 选中/取消选中所有复选框(动态生成),javascript,jquery,asp.net-mvc,Javascript,Jquery,Asp.net Mvc,我有一个动态生成的带有复选框的视图,以及一个用于选中/取消选中所有复选框的按钮。我尝试下面的代码,但是,复选框没有被选中。请帮忙。 多谢各位 使用复选框查看: <button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button> @for (int i =
<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>
}
选择/取消选择全部
@对于(int i=0;i<@Model.workDaysList.Count;i++)
{
@Model.workDaysList[i][1]。子字符串(6,2)/@Model.workDaysList[i][1]。子字符串(4,2)/@Model.workDaysList[i][1]。子字符串(0,4)
@Model.detailDaysList[i][0]/@Model.detailDaysList[i][1]
@Model.detailDaysList[i][2]/@Model.detailDaysList[i][3]
@型号.详细日期列表[i][4]h
}
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>
$(文档).ready(函数(){
$(“#选择反转”)。单击(函数(){
$(“输入[type='checkbox']”)。每个(函数(){
如果(this.checked==false){
this.checked=true;
}否则{
此项检查=错误;
}
});
});
});
缺少关闭})
顺便说一句:切换可以这样写:
this.checked = !this.checked
正如其他人所说,您缺少结束括号 您还可以将代码缩短一点:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
还要注意,您的问题与ASP.NET或jQuery UI无关。
试试看
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','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);
});
});
试试这个:
<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>
$(文档).ready(函数(){
$(“#选择反转”)。单击(函数(){
$(“输入[type='checkbox']”)。每个(函数(){
如果($(this).is(':checked')){
$(this.prop('checked',false);
}否则{
$(this.prop('checked',true);
}
});
})
});
尝试从一个基本的HTML代码开始,并在此基础上构建!您的模型代码可能正在阻止HTML。你可以找到工作原型
什么不起作用?来吧-1 P.S.将代码放入DOM ready Event中按钮单击时未选中复选框控制台中的任何错误?请先自便。我做了指示的调整,但没有改变。未选中复选框,并且我在控制台中没有错误。我不明白为什么我的问题现在为-5?怎么了?感谢您对ASP.NET和jQuery UI的建议。我尝试了指定的代码,它没有选中复选框,并且控制台中没有错误。您的页面中包含jquery了吗?这意味着控制台中无论如何都会出现错误。。代码本身不是问题,请参见
<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;
}
});
});