获取多个输入无线电值并提交到PHP脚本

时间:2011-05-12 15:32:34

标签: php ajax jquery

今天我想学习如何获取多个输入类型按钮值与原始值相比较并最后提交到php脚本!我怎么能用Jquery做到这一点?

<html>
<body>
<div id="leftDiv" class="container"> 
<form action="" method="get"> 
    <fieldset>
        <p>Something 0</p>

        <lable>Yes</label>
        <input type="radio" name="Group0" value="1" >

        <lable>No</label>
        <input type="radio" name="Group0" value="0" >

    </fieldset>

    <fieldset>
        <p>Something 1</p>

        <lable>Yes</label>
        <input type="radio" name="Group1" value="1" >

        <lable>No</label>
        <input type="radio" name="Group1" value="0" >

    </fieldset>

    <fieldset>
        <p>Something 2</p>

        <lable>Yes</label>
        <input type="radio" name="Group2" value="1" >

        <lable>No</label>
        <input type="radio" name="Group2" value="0" >

    </fieldset>

    <fieldset>  
        <input type="submit" name="update" class="button" value="Submit"> 
    </fieldset>
</form>
</div>
</body>
</html>

上述值由php脚本生成(可以是1或100)

2 个答案:

答案 0 :(得分:0)

这是一个非常好的教程,将教你如何基本知识:

http://trevordavis.net/blog/ajax-forms-with-jquery

您可以使用JSON获取单选按钮的值,如下所示:

var radios = {};
$('input[type="radio"]').each(function() {
  radios[$(this).attr('name')] = $(this).attr('value');
});

答案 1 :(得分:0)

最简单的方法实际上是在HTML中选择正确的值并将.onChange事件绑定到它们。否则,有一个隐藏字段与原始值,并在onChange比较它们

   //a hidden input field with the original value
    <input type='hidden' id='Group0' value='0'/>
    // a set of radio fields that reference the original field we will be comparing with in their 'rel' attribute for easy jQuery selection
    Off<input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=0/><br/>
    On <input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=1/>

    <script>
    $(document).ready(function(){
       $('.compareOnChange').live('change',function(){
         if($($(this).attr('rel')).val()!=$(this).val(){
          //the value currently is different than the original value, fire our action
         }

       });

    });

    </script>