根据值选择复选框？

时间：2011-03-30 12:59:17

标签： javascript jquery html

所以我有下面的代码。我需要为点击链接时选择的某些公司添加一些html按钮。排序类似于全选，选择无。但它将选择公司公司，选择特许经营公司等。所有公司都基于ID。如何根据这些链接检查输入类型中的值？ 示例：

链接：选择公司。 （单击链接后应检查ID：1,14,17,47）

  <p>
<input type="checkbox" name="sites[]" id="site-1" value="1" checked="checked"/>
<label for="site-1" style="float: none; display: inline; ">Company 1</label>
</p>
<p>
<input type="checkbox" name="sites[]" id="site-14" value="14" checked="checked"/>
<label for="site-14" style="float: none; display: inline; ">Company 14</label>
</p>
<p>
<input type="checkbox" name="sites[]" id="site-17" value="17" checked="checked"/>
<label for="site-17" style="float: none; display: inline; ">Company 17</label>
</p>
<p>
<input type="checkbox" name="sites[]" id="site-47" value="47" checked="checked"/>
<label for="site-47" style="float: none; display: inline; ">Company 47</label>
</p>

这是我目前用于选择全部的代码，选择无，以及实际生成可以检查的所有公司的代码：

<p><label>Show on Sites:<br><a href="" onclick="$('sites').select('input[type=checkbox]').each(function(e){if(!e.checked)e.click();}); return false;">Select All</a> | <a href="" onclick="$('sites').select('input[type=checkbox]').each(function(e){if(e.checked)e.click();}); return false;">Select None</a></label></p>
            <div style="float: left;" id="sites">
                -- Select brand first --
                <?
                if($promotion->id) {
                    $sites = DBObject::getObjects('Company', "company_id IN (SELECT company_id FROM company_promotions WHERE promotion_id = '{$promotion->id}')");
                    foreach($sites AS $site) {
                        ?>
                    <input type="hidden" value="<?= $site->id ?>">
                        <?
                    }
                }
                ?>
            </div>

7 个答案:

答案 0 :(得分：3)

function checkCheckboxesByIds(ids) {
     $(':checkbox').removeAttr('checked');   
     $.each(ids, function(i, id) {
        $('#site-' + id).attr('checked', 'checked'); 
     });
}

checkCheckboxesByIds([1, 14, 17, 47]);

答案 1 :(得分：1)

在这里工作演示：http://jsfiddle.net/KBNpQ/1/

我会使用类名对我的复选框进行分组：

<input type="checkbox" name="sites[]" id="site-1" value="1" class="corporate"/>
<input type="checkbox" name="sites[]" id="site-2" value="2" class="corporate franchise"/>
<input type="checkbox" name="sites[]" id="site-3" value="3" class="corporate"/>
<input type="checkbox" name="sites[]" id="site-4" value="4" class="corporate"/>
<input type="checkbox" name="sites[]" id="site-5" value="5" class="franchise"/>
<input type="checkbox" name="sites[]" id="site-6" value="6" class="franchise"/>
<input type="checkbox" name="sites[]" id="site-7" value="7" class="franchise corporate"/>
<input type="checkbox" name="sites[]" id="site-8" value="8" class="franchise"/>

在这个样本中有8家公司，3家特许经营公司，3家公司和2家公司。

现在在你的HTML：

<a href="corporate">Corporate</a>
<a href="franchise">Franchise</a>
<a href="#" id="all">All</a>
<a href="#" id="none">None</a

＆GT;

你的jQuery中的

：

$('a').live('click', function(){
    var href = $(this).attr('href');
    $('input[type="checkbox"]').removeAttr('checked');
    $('input[type="checkbox"].' + href).attr('checked','checked');
    return false;
});

$('a#all').live('click', function(){
    $('input[type="checkbox"]').attr('checked', 'checked');
});

$('a#none').live('click', function(){
    $('input[type="checkbox"]').removeAttr('checked');
});

你的php部分看起来像这样

...

foreach($sites AS $site) {
?>
    <input type="hidden" value="<?= $site->id ?>" class="<?=$site->type ?>">
<?
}

...

$ site-＆gt;类型应包含“franchise”或“corporate”

等类型值

答案 2 :(得分：0)

我建议添加课程以将公司组合在一起。例如：

<input type="checkbox" class="corporate" name="sites[]" id="site-1" value="1" checked="checked"/>
<label for="site-1" style="float: none; display: inline; ">Company 1</label>
</p>
<p>
<input type="checkbox" class="franchise" name="sites[]" id="site-14" value="14" checked="checked"/>
<label for="site-14" style="float: none; display: inline; ">Company 14</label>
</p>
<p>
<input type="checkbox" class="franchise" name="sites[]" id="site-17" value="17" checked="checked"/>
<label for="site-17" style="float: none; display: inline; ">Company 17</label>
</p>
<p>
<input type="checkbox" class="corporate" name="sites[]" id="site-47" value="47" checked="checked"/>
<label for="site-47" style="float: none; display: inline; ">Company 47</label>
</p>

然后，您可以仅基于类查询这些DOM元素并对其进行样式设置，添加按钮等。

$(".corporate").attr('checked', 'checked');

此外，您可以随时设置不同实体的样式。

答案 3 :(得分：0)

我会使用一个循环，这假设您在阵列中拥有所需的公司：

var corp_company_ids = [1,14,17,47,...];

for( var i = 0; i < company_ids.length; i++) {
  $('input:checkbox[value="' + corp_company_ids[i] + '"]').attr('checked', 'checked');
}

可以使用类似的方法取消选中/检查公司和特许经营公司。

答案 4 :(得分：0)

您的按钮：

<button type="button" data-sites="1,14,17,47">

JS代码：

(function($){
  var $inputs = $("input[name='sites[]']");

  $("button[data-sites]").click(function(){
    var sites = $(this).data("sites").split(","),
        sitesLen = sites.length;

    $inputs.filter(":checked").removeAttr('checked');

    while(sitesLen--) {
      $inputs.filter("#site-" + sites[sitesLen]).attr('checked','checked');
    }
  });
})(jQuery)

答案 5 :(得分：0)

我不是为每个组提供一个id列表，而是为每个组添加一个类：

<input type="checkbox" name="sites[]" id="site-1" value="1" class="corporate" />
<input type="checkbox" name="sites[]" id="site-12" value="12" class="franchise" />

并具有按类名选择组的功能：

<a href="#" onclick="return SelectGroup('corporate')">Corporate companies</a>
<a href="#" onclick="return SelectGroup('franchise')">Franchise companies</a>


function SelectGroup(groupName) {
    $(':checkbox').removeAttr('checked');
    $(':checkbox.'+groupName).attr('checked', 'checked');
}

答案 6 :(得分：0)

我创建了一个小型JQuery函数。这里的好处是复选框可以是多种类型的一部分。并不是说一个复选框只能用于一个目的（即特许经营）。我认为这会给你更多的灵活性..

<强> HTML 

<html>
    <body><p>
        <input type="checkbox" name="sites[]" id="site-1" value="1"/>
        <label for="site-1" style="float: none; display: inline; ">Company 1</label>
        </p>
        <p>
            <input type="checkbox" name="sites[]" id="site-14" value="14"/>
            <label for="site-14" style="float: none; display: inline; ">Company 14</label>
        </p>
        <p>
            <input type="checkbox" name="sites[]" id="site-17" value="17"/>
            <label for="site-17" style="float: none; display: inline; ">Company 17</label>
        </p>
        <p>
            <input type="checkbox" name="sites[]" id="site-47" value="47"/>
            <label for="site-47" style="float: none; display: inline; ">Company 47</label>
        </p>
        <input type="button" id="button" value="Test" />
        <input type="button" id="button2" value="Test2" />
    </body>
</html>
的 JQuery的 

function checkFirmButton(arrIDs) {
    // uncheck all boxes first
    $(':checkbox').each(function(index){$(this).attr('checked', false)});

    // check boxes for this company
    var arrCheckboxes = $(':checkbox');
    arrCheckboxes.each(function(index) {
        if (jQuery.inArray($(this).val(), arrIDs) > -1) {
            $(this).attr('checked', true);
        }
    });
}
$("#button").click(function(){
    checkFirmButton(['14', '47']);
});
$("#button2").click(function(){
    checkFirmButton(['1', '17', '47']);
});

对于正常工作的版本，请检查this Fiddle

相关问题
最新问题