如何选择或取消选择JQuery Mobile中的所有复选框?
我有几个可折叠的复选框,我正在尝试检查/取消选中该部分中的所有框。
HTML
目前,当我单击主复选框时,它只是打开并关闭可折叠对话框。
JQuery的
JQuery代码似乎不起作用。
$(document).ready(function() { fixContentHeight(); $('#education').click(function() { $("INPUT[name='education']").attr('checked', $('#education').is(':checked')); }); });
任何提示都会有所帮助!
我不知道这个函数( fixContentHeight();
)是做什么的。
这样做,它按预期工作。
//fixContentHeight(); $('#education').click(function() { $("INPUT[name='education']") .attr({ checked: $('#education').is(':checked') }); });
其他复选框部分采用相同的方式。
参考现场演示
更新:
请参阅我对所有复选框部分进行了一些修改的相同代码,
//fixContentHeight(); $('h3 input[type=checkbox]').click(function() { $("INPUT[name='"+this.name+"']") .attr({ checked: $(this).is(':checked') }); });
HTML:
实际上,您的HTML
标签丢失了。
-
-
-
参考现场演示2
更新2:
我已经完成了你的代码并对其进行了修改。 最后,我在复选框中遇到了问题。
您需要刷新checkboxradio
,以更新所有复选框的选中值。
你需要使用: –
$("input[name='"+this.name+"']").checkboxradio("refresh");
JS:
$('h3 input[type=checkbox]').click(function() { $("input[name='"+this.name+"']") .attr({ checked: $(this).is(':checked') }); $("input[name='"+this.name+"']").checkboxradio("refresh"); });
参考现场演示3
您需要阻止点击事件冒泡到可折叠的
。
$('h3 input[type=checkbox]').click(function(e) { $("INPUT[name='"+this.name+"']") .attr({ checked: $(this).is(':checked') }); e.stopPropagation(); //<--stops the click from bubbling up. });
文档: http : //api.jquery.com/event.stopPropagation/
编辑:阅读更多关于可折叠的内容,理论上只需点击header
折叠。 检查以确保您的
标签都已正确关闭,并且没有任何杂散元素缺少结束标记。
$('h3 input[type=checkbox]').click(function() { var selected = $(this).attr('id'); $("INPUT[name="+selected +"]").attr({checked: $(this).is(':checked')}); });
我想,你想要这个:
$('h3 :checkbox').change(function() { //'$(this).parent().next()' is appropriate 'fieldset' element $(this).parent().next().find(':checkbox').prop('checked', $(this).prop('checked')); });
这适用于所有3个教育 , 紧急情况和设施 。
DEMO
我理解这个问题很老但是对于那些寻找jQuery 2.x和jQuery Mobile 1.4.3示例的人试试这个:
HTML:
CSA katalin_2003
grp1
grp2
JS
$(document).on("pageinit", function(e) { $('#button1').on( "click", function() { $('#chk input[type=checkbox][grp=1], #chk input[type=checkbox][grp=2]').prop('checked', true).checkboxradio('refresh'); console.log('ALL checked'); }); $('#button2').on( "click", function() { $('#chk input[type=checkbox][grp=1], #chk input[type=checkbox][grp=2]').prop('checked', false).checkboxradio('refresh'); console.log('ALL UNchecked'); }); $('#button3').on( "click", function() { $('#chk input[type=checkbox][grp=1]').prop('checked', true).checkboxradio('refresh'); $('#chk input[type=checkbox][grp=2]').prop('checked', false).checkboxradio('refresh'); console.log('grp1 checked'); }); $('#button4').on( "click", function() { $('#chk input[type=checkbox][grp=2]').prop('checked', true).checkboxradio('refresh'); $('#chk input[type=checkbox][grp=1]').prop('checked', false).checkboxradio('refresh'); console.log('grp2 checked'); }); });
JSFiddle DEMO
Stack Overflow上的所有答案对我都不起作用。
以下是我最终找到的解决方案:
你可以试试$("#radioLabel1").trigger("click");
其中radioLabel1
是无线电标签的id。
我的工作代码: