Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > jQuery - работа с чекбоксами

Автор: Emm 27.5.2009, 10:36

такая ситуация, есть куча чекбоксов...

Код


<input type="checkbox" name="qwerty[milk][A]">
<input type="checkbox" name="qwerty[milk][B]">
<input type="checkbox" name="qwerty[milk][C]">
<input type="checkbox" name="qwerty[coffe][A]">
<input type="checkbox" name="qwerty[coffe][B]">
<input type="checkbox" name="qwerty[coffe][C]">
<input type="checkbox" name="qwerty[honey][A]">
<input type="checkbox" name="qwerty[honey][B]">
<input type="checkbox" name="qwerty[honey][C]">
<input type="checkbox" name="qwerty[honey][D]">
<input type="checkbox" name="qwerty[honey][E]">
...

нужно отмечать всю группу по возрастанию, те если отмечаем [honey][D] то все перед ней нужно автоматически отметить и если снимаем например с [honey][С] то остается только АиВ и тд...
вопрос, можно ли на jQuery с делать такой перебор, или как проще такое организовать?

Автор: Veve 27.5.2009, 20:48

Насчёт jQuery не знаю, к сожалению, не использую.
Но я бы сделал так:

Код


<script type="text/javascript">
function test(elem)
{
    
    var reg=/^qwerty\[([a-z]*)\]\[([A-Z])\]$/;
    var main=reg.exec(elem.name);

    var elements=document.getElementsByTagName("input");

    for (var i=0; i<elements.length; i++)
    {
        
        var temp=reg.exec(elements[i].name);
        if (temp[1]==main[1])
        {
            if (temp[2]<main[2])
                elements[i].checked=true;

            if (temp[2]>main[2])
                elements[i].checked=false;

        }
    
    }
}

</script>

Код


<input type="checkbox" name="qwerty[milk][A]" onclick="test(this)">qwerty[milk][A]<br/>
<input type="checkbox" name="qwerty[milk][B]" onclick="test(this)">qwerty[milk][B]<br/>
<input type="checkbox" name="qwerty[milk][C]" onclick="test(this)">qwerty[milk][C]<br/>
<input type="checkbox" name="qwerty[coffe][A]" onclick="test(this)">qwerty[coffe][A]<br/>
<input type="checkbox" name="qwerty[coffe][B]" onclick="test(this)">qwerty[coffe][B]<br/>
<input type="checkbox" name="qwerty[coffe][C]" onclick="test(this)">qwerty[coffe][C]<br/>
<input type="checkbox" name="qwerty[honey][A]" onclick="test(this)">qwerty[honey][A]<br/>
<input type="checkbox" name="qwerty[honey][B]" onclick="test(this)">qwerty[honey][B]<br/>
<input type="checkbox" name="qwerty[honey][C]" onclick="test(this)">qwerty[honey][C]<br/>
<input type="checkbox" name="qwerty[honey][D]" onclick="test(this)">qwerty[honey][D]<br/>
<input type="checkbox" name="qwerty[honey][E]" onclick="test(this)">qwerty[honey][E]<br/>

Автор: Emm 28.5.2009, 20:24

спасибо за код, переписал на jQuery:

Код


 $('input[type=checkbox]').click(function(){     
var abc = new Array();
abc['A'] = 1;
abc['B'] = 2;
abc['C'] = 3;
abc['D'] = 4;
abc['E'] = 5;
var reg = /^qwerty\[([a-z]*)\]\[([A-Z])\]$/;
var the = reg.exec(this.name);
$("[name*='\\[" + the[1] + "\\]']").each(function(){
var oute = reg.exec(this.name);
    if(abc[the[2]] > abc[oute[2]]){
      $("[name*='\\[" + oute[1] + "\\]\\[" + oute[2] + "\\]']:enabled").attr('checked', 'checked');
    } 
    if(abc[the[2]] < abc[oute[2]]){
      $("[name*='\\[" + oute[1] + "\\]\\[" + oute[2] + "\\]']").removeAttr('checked');
    } 
  });
 });
});

меня устраивает, но может есть вариант покороче...

Автор: ksnk 28.5.2009, 22:50

Emm, В принципе, можно и немного короче такое написать...

Код


var reg = /^qwerty\[([a-z]*)\]\[([A-Z])\]$/;

$('input:checkbox[name^="qwerty["]').click(function(){ 
    var t= reg.exec(this.name);
    $('input:checkbox[name^="qwerty['+t[1]+']["]').each(function(){
       var tt=reg.exec(this.name);
       if(tt[2]<t[2])
          $(this).attr('checked', 'checked');
       else if (tt[2]>t[2])
          $(this).removeAttr('checked');
    })
});

Автор: youri 28.5.2009, 23:16

еще можно так

Код


$('input:checkbox').click(function() {
    var n = this.name.match(/\[\w+/).toString(),
        m =   this.checked   ? 'prevAll'   : 'nextAll';
    $(this)[m]('input:checkbox').filter(function() {
        return this.name.indexOf(n) != -1;
    }).attr('checked', this.checked);
});