如何选择或取消选择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')}); }); 

      http://jsfiddle.net/mynameisdonald/p584k/6/

      我想,你想要这个:

       $('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。

      我的工作代码: