根据价值选择复选框？_JavaScript

所以我有下面的代码。 单击链接时，我需要为某些公司添加一些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>

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

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

此处的工作演示： :

我会使用类名将复选框分组：

<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

>

在您的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-> type应该包含类型值，例如“ franchise”或“ corporate”

我建议添加类以将公司分组在一起。 例如：

<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');

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

我将使用一个循环，这是假设您拥有要排列的公司：

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');
}

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

您的按钮：

<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)

与其为每个组提供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');
}

我创建了一个小的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']); });

对于工作版本，请检查

根据价值选择复选框？

问题描述

1楼
alex 3 已采纳 2011-03-30 13:02:46

2楼
ezmilhouse 1 2011-03-30 13:22:38

3楼
McStretch 0 2011-03-30 13:04:38

4楼
Groovetrain 0 2011-03-30 13:07:56

5楼
bpierre 0 2011-03-30 13:13:00

6楼
Corneliu 0 2011-03-30 13:26:46

7楼
Steven Ryssaert 0 2011-03-30 13:27:24

根据价值选择复选框？

问题描述

1楼 alex 3 已采纳 2011-03-30 13:02:46

2楼 ezmilhouse 1 2011-03-30 13:22:38

3楼 McStretch 0 2011-03-30 13:04:38

4楼 Groovetrain 0 2011-03-30 13:07:56

5楼 bpierre 0 2011-03-30 13:13:00

6楼 Corneliu 0 2011-03-30 13:26:46