如何根据选中的复选框创建响应?

时间:2011-09-12 11:34:57

标签: php forms jquery checkbox

我需要一些帮助。 我正在创建一个具有表单的站点,并且响应文本(在选中框后将立即显示)取决于选中的复选框。像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 编写所有的回复和条件。

原来如此!谁能帮助我? :)希望我写得足够好,你能理解我的问题!

提前致谢!

4 个答案:

答案 0 :(得分: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中大致相同。当然,如果您计划在客户端处理此问题,代码会有所不同。但几乎相同的概念。

答案 1 :(得分: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>

答案 2 :(得分: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

答案 3 :(得分:0)

我找到了一种简单的方法来完成这项工作。你必须嵌入Jquery Form Plugin。 POST参数由response.php处理。每当有人更改其中一个复选框的状态时,就会提交表单,并在output-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>