Checkbox и radio в jQuery

Тема в разделе "Другие языки", создана пользователем yeaahhh, 10 дек 2010.

Модераторы: Цукер
  1. yeaahhh

    yeaahhh

    Регистр.:
    8 май 2008
    Сообщения:
    278
    Симпатии:
    11
    Друзья. Столкнулся со следующей проблемой:
    Не получается передать значение checkbox передачей данных с помощью jquery
    вида:
    <input type="checkbox" id="rules">
    PHP:
    <script>  
            $(
    document).ready(function(){  
              
                $(
    '#pass').submit(function(){  
                    $.
    ajax({  
                        
    type"POST",  
                        
    url"update_user.php",  
                        
    data"rules="+$("#rules").val(),  
                        
    success: function(html){  
                            $(
    "#passstat").html(html);  
                        }  
                    });  
                    return 
    false;  
                });  
                  
            });  
        
    </script>  
    Не понимаю, как определить, нажата кнопка или нет? Передаётся всегда одно и тоже..
    Как решить данную проблему?
    Заранее спасибо..
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    есть атрибут checked, по нему можно определить отмечено или нет
    HTML:
    
    if($("#rules").attr("checked")){
        alert(checked);
    }
    
    а .val() возвращает значение атрибута value, но в скрипте его нет поэтому всегда будет пустое
     
    yeaahhh нравится это.
  3. unsiker

    unsiker

    Регистр.:
    6 июн 2008
    Сообщения:
    465
    Симпатии:
    172
    вот все фукции JS для работы с чекбоксами и радио кнопками:
    http://www.breakingpar.com/bkp/home.nsf/0/CA99375CC06FB52687256AFB0013E5E9
     
    yeaahhh нравится это.
  4. Mr.Emm

    Mr.Emm Постоялец

    Регистр.:
    5 май 2008
    Сообщения:
    144
    Симпатии:
    107
    Код:
    var ckd = ($('#rules').is(':checked')) ? 'on' : 'off';
     
    yeaahhh нравится это.
  5. SimonSmith

    SimonSmith Постоялец

    Регистр.:
    25 сен 2008
    Сообщения:
    147
    Симпатии:
    32
    вопрос-

    а если есть такой вариант:
    HTML:
    
    <form id="#ajaxForm">
    <input type="text" name="title"><br>
    <input type="checkbox" name="cb[]" id="rule1"><br>
    <input type="checkbox" name="cb[]" id="rule2"><br>
    <input type="checkbox" name="cb[]" id="rule3">
    </form>
    я пробовал там с
    HTML:
    data: $('#ajaxForm').serialize(),
    при отсылке данные не отображаются но отправляются...
    через перехват данных плагин мазиллы ловил text = данные и cb[] = данные , cb[]= данные, cb[]= данные
     
  6. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    ошибка в форме, если $('#ajaxForm') то id="ajaxForm"
    А отправлятся будут все чекбоксы, которые отмечены. Если не будет указан value, то будет отправлено значение "on". Так как название у всех чекбоксов одинаковое cb[] значит php получит массив $_POST['cb'], php сделает в массиве свои индексы, но можно в форме названия с индексами указать cb[10], cb[20]
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
        $('#ajaxForm').submit(function(){
            
        //если надо проверять сколько чекбоксов отмечено
        //checkbox = $("#ajaxForm input[name='cb[]']:checked");
        //alert(checkbox.length);
                                       
            alert($('#ajaxForm').serialize());
            $.ajax({  
                type: "POST",
                url: "checkboxes.php",
                data: $('#ajaxForm').serialize(),
                cache:false,
                success: function(html){  
                    alert(html);
                }  
            });  
            return false;  
        }); 
    });
    </script>
    
    </head>
    
    <body>
    
    <form id="ajaxForm">
        <input type="text" name="title"><br>
        <input name="cb[]" type="checkbox" id="rule1" value="10" /><br>
        <input name="cb[]" type="checkbox" id="rule2" value="20" /><br>
        <input name="cb[]" type="checkbox" id="rule3" />
        <input name="submit" type="submit" value="ok" />
    </form>
    
    </body>
    </html>
    
    checkboxes.php
    PHP:
    <?
    print_r($_POST);
    print_r($_POST['cb']);
    ?>

    или если надо отпровлять данные в реальном режиме, как только изменится какой нибудь из чекбоксов, тогда
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
        $("#ajaxForm input[name='cb[]']").change(function(){
            $.ajax({  
                type: "POST",
                url: "checkboxes.php",
                data: $('#ajaxForm').serialize(),
                cache:false,
                success: function(html){  
                    alert(html);
                }  
            }); 
        }); 
    });
    </script>
    
    </head>
    
    <body>
    
    <form id="ajaxForm">
        <input type="text" name="title"><br>
        <input name="cb[]" type="checkbox" id="rule1" value="10" /><br>
        <input name="cb[]" type="checkbox" id="rule2" value="" /><br>
        <input name="cb[]" type="checkbox" id="rule3" />
    </form>
    
    </body>
    </html>
    
     
    SimonSmith нравится это.