在 jQuery 上不起作用 .buttonset()

Question

我有许多由 wordpress 初始化的 :checkbox 元素。 现在我将 .buttonset() 函数设置为 #format 但这不起作用... 喜欢这个样本：http://jqueryui.com/button/#checkbox

HTML：

<div id="format">
    <?php
     $categories = get_categories();
     foreach ($categories as $category) { ?>
     <input type="checkbox" name="check" value="<?php echo $category->cat_ID; ?>">
     <label><?php echo $category->cat_name;?></label><?php } ?>
</div>

JS：

$('#format').buttonset();
$('input[type=checkbox]').removeClass('ui-helper-hidden-accessible');

$(':checkbox[name=check]').each(function( i ){
    var nameID = 'check'+ (i+1);
    this.id = nameID;
    $(this).next('label').prop('for', nameID); 
});

Answer 1

您所有的复选框都具有相同的名称“check”。 尝试这样做：

<div id="format">
    <?php
     $i = 0;
     $categories = get_categories();
     foreach ($categories as $category) { ?>
     <input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
     <label><?php echo $category->cat_name;?></label>
     <?php 
       $i++;
       } 
      ?>
</div>

然后在你的js中：

$(':checkbox[name^=check]').each(function( i ){
    var nameID = 'check'+ (i+1);
    this.id = nameID;
    $(this).next('label').prop('for', nameID); 
});

然后jQuery会找到所有以名字check开头的复选框，比如“check1”、“checkblabla”等等……

还有“$('#format').buttonset();”需要在“for”更改之后出现。 字体：

http://api.jquery.com/attribute-starts-with-selector/

已编辑：

我认为你真的不需要用js来改变for，你可以只用php来做，那么：

<div id="format">
    <?php
     $i = 0;
     $categories = get_categories();
     foreach ($categories as $category) { ?>
     <input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
     <label for="check<?php echo $i ?>"><?php echo $category->cat_name;?></label>
     <?php 
       $i++;
       } 
      ?>
</div>

然后在你的js中：

$( "#format" ).buttonset();