Как Выделить Все Checkbox Одним Кликом?

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем BlackShadow, 1 мар 2012.

  1. BlackShadow

    BlackShadow Well-Known Member

    Регистрация:
    4 фев 2011
    Сообщения:
    111
    Симпатии:
    1
    Создаю чат. Там есть функция личных сообщений. Мне нужен код на яве (ну или на PHP в крайнем случае), который бы одним кликом выделял все чекбоксы рядом с сообщениями. Я бы и так нашел этот скрипт в гугле, если бы не одно "но".

    Дело в том, что сообщения хранятся в двух таблицах мускула - inbox и outbox. Вытаскивать я их научился, но чтобы не париться с переменными, я сделал небольшую хитрую вещь, при которой происходит следующее:
    Код (PHP):
    for ($ii=1; $ii<=$count; $ii++){
    $nn = $ii-1;
    $toUser = mysql_result($tableMail,$nn,"toUser");
    if ($toUser == $log){
    $id = mysql_result($tableMail,$nn,"id");
    $fromUser = mysql_result($tableMail,$nn,"fromUser");
    $themeMess = mysql_result($tableMail,$nn,"themeMess");
    $timeMess = mysql_result($tableMail,$nn,"timeMess");
    $txtMess = mysql_result($tableMail,$nn,"txtMess");
    $readable = mysql_result($tableMail,$nn,"readable");
    if ($readable == 1){
    $read = "Прочтено";
    } else {
    $read = "Не прочтено";
    }
    $sql = "UPDATE inbox SET readable='1' WHERE id='$id'";
    $addData = mysql_query($sql);
    $inboxStr .= "
    <tr>
    <td align=\"center\"><input type=\"checkbox\" name=\"mails["
    .$id."]\"></td>
    <td>"
    .$fromUser."</td>
    <td>"
    .$themeMess."</td>
    <td>"
    .$txtMess."</td>
    <td align=\"center\" width=\"1%\">"
    .$timeMess."</td>
    <td align=\"center\" width=\"1%\">"
    .$read."</td>
    <td align=\"center\" width=\"1%\"><a href=\"mail.php?dir=write&toUser="
    .$fromUser."&themeMess=".$themeMess."\">Ответить</a></td>
    </tr>
    "
    ;
    }
    }
    Если обратить внимание на эту строчку:
    <td align=\"center\"><input type=\"checkbox\" name=\"mails[".$id."]\"></td>,
    то можно заметить, что при отправке формы, мы получим в POST['mails'] массив, в котором будут наши сообщения. Таким образом, я и смогу их удалять. Но зато изменилось решение в JS-коде, который основывается вот на чем:
    Код (LotusScript):
    function sel_all(){
    if(!document.form_name1.cheks) return;
    if(!document.form_name1.cheks.length){
    document.form_name1.cheks.checked = document.form_name1.cheks.checked ? false : true;
    } else {
    for(var i=0;i<document.form_name1.cheks.length;i++){
    document.form_name1.cheks[i].checked = document.form_name1.cheks[i].checked ? false : true;
    }
    }
    form_name1 - это название формы, а cheks - это значение, указываемое в input атрибута name. Но как мы видим из моего примера с массивом в атрибуте name, здесь данный скрипт работать не будет, потому что name у каждого объекта разное.

    Вот тут и проблема: как мне обойти эту проблему и сделать так, чтобы сообщения выделялись?
     
  2. acorn

    acorn PHP Developer

    Регистрация:
    29 авг 2004
    Сообщения:
    599
    Симпатии:
    3
    jQuery не хочешь заюзать? ищешь все чекбоксы в диве и чекаешь. вот пример для prototype (это то, что было под рукой ;) ). в jQuery что-то похожее

    Код (Text):
                $('item-table').select('tbody tr td input').each(function (elem) {
    elem.checked = true;
    });
     
  3. BlackShadow

    BlackShadow Well-Known Member

    Регистрация:
    4 фев 2011
    Сообщения:
    111
    Симпатии:
    1
    ой.... так не хочется пока jquery заниматься.. Можно как нибудь через id? Или может всё-таки через name?
     
  4. acorn

    acorn PHP Developer

    Регистрация:
    29 авг 2004
    Сообщения:
    599
    Симпатии:
    3
    Грубо говоря алгоритм такой:
    перебираешь все чекбоксы (лучше всего ограничить перебор таблицей или дивом) и чекаешь их. На голом JavaScript делается не так красиво, но и не сложно.. попробуй это:

    Код (Text):
    <script language="JavaScript" type="text/JavaScript">
    function CheckAll()
    {
    var i;
    for(i=0; i<document.name.elements.length; i++)
    {
    if(document.name.check.checked==true)
    {document.name.elements[i].checked=true;}
    else {document.name.elements[i].checked=false;}
    }
    }
    </script>
    Добавлено: P.S. посмотрел твой код - такой же. Так в чем тогда проблема?
     
  5. BlackShadow

    BlackShadow Well-Known Member

    Регистрация:
    4 фев 2011
    Сообщения:
    111
    Симпатии:
    1
    Проблема в том, что атрибут name в input'е меняется и поэтому просто document.form.name_check.checked не отловить...

    Кстати, вот мой ява:
    Код (Text):
    function CheckAll(){
    var i;
    for(i=0; i<document.form["mails"].elements.length; i++){
    if(document.form["mails"].check.checked==true){
    document.form["mails"].elements[i].checked=true;
    } else {
    document.form["mails"].elements[i].checked=false;
    }
    }
    }
    </script>
    А вот код на "кнопке":
    Код (Text):
    <input type="checkbox" onClick="CheckAll()">
    Но что-то не работает. Что подправить?

    P.S.
    <a href="#" onClick="java script:CheckAll()">Выделить всё</a> - тоже не помогло
     
  6. BlackShadow

    BlackShadow Well-Known Member

    Регистрация:
    4 фев 2011
    Сообщения:
    111
    Симпатии:
    1
    НАШЕЛ НАШЕЛ НАШЕЛ!!!

    Скрипт выделения:
    Код (LotusScript):
    <script type="text/javascript">
    function ckeck_uncheck_all() {
    var frm = document.mails;
    for (var i=0;i<frm.elements.length;i++) {
    var elmnt = frm.elements[i];
    if (elmnt.type=='checkbox') {
    if(frm.master_box.checked == true){ elmnt.checked=false; }
    else{ elmnt.checked=true; }
    }
    }
    if(frm.master_box.checked == true){ frm.master_box.checked = false; }
    else{ frm.master_box.checked = true; }
    }
    </script>
    Кнопка выделения:
    Код (Text):
    <input type="checkbox" onclick="java script:ckeck_uncheck_all()" title="Выбрать все" name="master_box">
    При этом input'ы должны иметь вид:
    Код (Text):
    <input type="checkbox" name="mails[]" value="1">

    Спасибо большое за помощь;)
     
Загрузка...

Поделиться этой страницей