根據價值選擇復選框？

Question

所以我有下面的代碼。 單擊鏈接時，我需要為某些公司添加一些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>

Answer 1

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

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

Answer 2

此處的工作演示： 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

>

在您的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”

Answer 3

我建議添加類以將公司分組在一起。 例如：

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

此外，您可以隨時設置不同實體的樣式。

Answer 4

我將使用一個循環，這是假設您擁有要排列的公司：

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

可以使用類似的方法來取消/檢查公司和特許公司。

Answer 5

您的按鈕：

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

Answer 6

與其為每個組提供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');
}

Answer 7

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

對於工作版本，請檢查此小提琴