如何根据选中的复选框创建响应 - How to create responses depending on which checkboxes are checked?

我需要一些帮助。我正在制作一个网站，有一个表单，响应文本(是在检查框后立即显示)是取决于哪些复选框被选中。像下面这个例子一样，只有复选框，没有单选按钮，而且比那更复杂一点。

有三个复选框，所以有五种情况;

1 - 2 - 3---------O - O - OX - 0 - 0X - X - 0X - 0 - XX - X - X之前

我想有5个不同的回应，想知道怎么做。我以前用过一点AJAX，但我记得不多了。我认为响应可以从php文件与get-parameters解析。但我不知道。我不把所有的响应和条件都写在jquery/javascript.

如此!有人能帮我吗?:)希望我写得足够好，你能理解我的问题!

提前感谢!

我认为你链接的关于: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中大致相同。当然，如果您计划在客户端处理这个问题，代码就会有所不同。但概念是一样的

<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>

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

我找到了一个简单的方法。你必须嵌入Jquery表单插件。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>