2011-09-12 36 views
0

我需要一些帮助。 我正在制作一个拥有表格的网站,并且响应文本(在选中复选框后立即显示)取决于选中哪个复选框。像this example at the bottom只有复选框,而不是单选按钮,并且比这更复杂一点。如何根据选中的复选框创建回复?

这是三个复选框,所以它是五个场景;

1 - 2 - 3 
--------- 
O - O - O 
X - O - O 
X - X - O 
X - O - X 
X - X - X 

我想有5个不同的回应,并想知道如何去做。我之前使用过AJAX,但我不记得太多..我一直在想,可以使用get-parameters从一个php文件解析响应......但我不知道。 我并不是所有的答案和条件都写在jquery/javascript

所以!任何人都可以帮我吗? :)希望我已经写得够好,让你了解我的问题!

在此先感谢!

+0

什么问题? – bevacqua

+2

我觉得三个复选框使2^3 = 8分的情况。 –

+0

^萨赫勒打我吧^ –

回答

0

我发现一个简单的方法来完成这项工作。你将不得不嵌入Jquery Form Plugin。 POST参数由response.php处理。在提交表单每次有人改变了其中一个复选框的状态,和响应在输出-DIV更新。

<head> 
    <script type="text/javascript" src="jquery-1.6.3.min.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 
</head> 
<body> 
    <form id="formId" name="formName" method="post"> 
    <input type="checkbox" name="Check[]" value="1" class="check"/> 
    <input type="checkbox" name="Check[]" value="2" class="check"/> 
    <input type="checkbox" name="Check[]" value="3" class="check"/> 
    </form> 

<div id = "output"></div> 
<script> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
     target: '#output', // target element(s) to be updated with server response 
     url: 'response.php' // override for form's 'action' attribute 
    }; 

    $('.check').change(function() { 
     $('#formId').ajaxSubmit(options); 
     return false; 
    }); 
}); 
</script> 
</body> 
</html> 
0

我想你链接的关于:checked选择器的页面可能是这个上下文中最有用的东西。

我不确定是否有顺利的方法来确定它们的组合是否被检查。我想你可以给每个人一个不同的二进制值(1,2,4),并将所有检查框的值相加?

然后,您可以将每个可能的总和与不同的响应呼叫相关联。

当然,如果你正在处理在服务器端的响应,它可能是一个更容易一点,因为服务器代码应该得到对这些值的列表。

不知道,如果它是有用的,但在Python我能胜任这样的事情在服务器上是这样的:

RESPONSES = [ 
    function_1, 
    ..., 
    function_8] 
def handle_checkboxes(request): 
    response_code = sum(list(request.params["checkboxes"])) 
    response = RESPONSES[response_code]() 
    return response 

我想这将是大约在PHP一样。当然,如果你打算在客户端处理这个问题,代码会有点不同。但几乎相同的概念。

+0

嗨,这就是我认为是很好。但是,如果我总结不同的值,其中一些会返回相同的值。 1 + 2,只有3例如。我认为这将是一个选项,可以返回一个文本字符串并对每个检查的值进行扩展。如果选中1和3,则文本字符串为“chk = 1&chk = 3”,然后将文本字符串发送到读取GET参数并通过XHR返回响应的php脚本。 – guzh

+0

这就是为什么你使用二进制值(在这种情况下是1,2,4),因为然后每个可能的组合产生一个独特的输出。 –

+0

啊,对不起。我没有看到! – guzh

0
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script language="javascript"> 

    $(document).ready(function(){ 

     $(".checks").click(function(){ 

        one = $("#one").attr("checked");  
       two = $("#two").attr("checked"); 
       three = $("#three").attr("checked"); 

       if(!one && !two && !three) 
       { 
        alert("0-0-0"); 
       } 
       else if(one && !two && !three) 
       { 
        alert("1-0-0"); 
       } 
       else if(one && two && !three) 
       { 
        alert("1-1-0"); 
       } 
       else if(one && !two && three) 
       { 
        alert("1-0-1"); 
       } 
       else if(one && two && three) 
       { 
        alert("1-1-1"); 
       } 

         });    


       }); 

</script> 

和HTML:

<form> 
1<input type="checkbox" id="one" class="checks" /><br> 
2<input type="checkbox" id="two" class="checks" /><br> 
3<input type="checkbox" id="three" class="checks" /> 
</form> 
+0

嗨,谢谢你的回答!但我想使用XHR来返回PHP文件的响应,以及PHP中的条件。使用XHR和Get参数。谢谢无论如何:) – guzh

+0

其好兄弟.. :) – mithunsatheesh

0

这里是JavaScript:

function countChecked() { 
    var str=""; 
    a= $("#a").attr("checked");  
    b= $("#b").attr("checked"); 
    c= $("#c").attr("checked"); 

    if (a){ str+='X'; } else str+='0'; 

    str+='-'; 

    if (b){ str+='X'; }else str+='0'; 

    str+='-'; 

    if (c){ str+='X'; }else str+='0'; 

    $("div").text(str); 
} 
countChecked(); 
$(":checkbox").click(countChecked); 

这里是HTML

<input type="checkbox" id="a" value="1" /> 
<input type="checkbox" id="b" value="2" /> 
<input type="checkbox" id="c" value="3" /> 
<br> 
<div></div> 

您还可以检查此JSFiddle

+0

嗨!谢谢你的回答,但正如我在帖子中提到的(现在强调),我想写一个php文件中的条件和响应。像发送XHR到php文件并检查get参数。 X's和O's只是指出情景。答案将是5个不同的句子..你能帮我进一步吗? :) – guzh

+0

对不起,我对PHP一无所知,但我会将php标签,也许别人可以帮助你。 – medopal

+0

啊,我以为我做到了。谢谢 :) – guzh

相关问题