javascript - 如何在复选框中组合相同命名的值并为其指定默认值

Question

这是我的代码

<form method="get" action="">
  <input type="checkbox" name="animal[]" value="all">
  <input type="checkbox" name="animal[]" value="cat">
  <input type="checkbox" name="animal[]" value="dog">
  <input type="checkbox" name="animal[]" value="bird">
  <input type="checkbox" name="animal[]" value="horse">
  <input type="submit" name="submit">
</form>

当我提交时，URL 看起来像

http://localhost/project/search.php?animal[]=cat&animal[]=bird

但我希望 URL 看起来像这样

http://localhost/project/search.php?animal=cat+bird

当我不选择复选框时，“全部”应该是默认的，例如

http://localhost/project/search.php?animal=all

Answer 1

扩展我的评论，当你有这样的表单时:

<form method="get" action="">
  <input type="checkbox" name="animal[]" value="all">
  <input type="checkbox" name="animal[]" value="cat">
  <input type="checkbox" name="animal[]" value="dog">
  <input type="checkbox" name="animal[]" value="bird">
  <input type="checkbox" name="animal[]" value="horse">
  <input type="submit" name="submit">
</form>

浏览器创建一个 HTTP GET 请求，如下所示:

http://localhost/project/search.php?animal[]=cat&animal[]=bird

这基本上是发送一组数据:

animal = [
  "cat",
  "bird"
];

然后 PHP 可以接受这个，并且会看到:

$_GET['animal'] array(2) { [0]=> string(3) "cat" [1]=> string(4) "bird" }  

这是预期的行为。

如果您想传递字符串数据，例如:cat+bird 或 all，您需要首先构造字符串数据。由于浏览器不知道如何执行此操作，因此我们需要使用 JavaScript 来执行此操作。我更喜欢 jQuery，一个 JavaScript 框架。这可能看起来像:

$(function(){
  $("form").submit(function(event){
    event.preventDefault();
    var myData = [];
    var dataString = "animal=";
    $("form input[type='checkbox']").each(function(index, element){
      if($(element).is(":checked")){
        myData.push($(element).val());
      }
    });
    if(myData.length){
      dataString += myData.join("+");
    } else {
      dataString += "all";
    }
    window.location.href = "http://localhost/project/search.php?" + dataString;
  });
});

现在，PHP 将得到如下内容:

$_GET['animal'] string(8) "cat+bird" 

希望有帮助。

更新

假设您有这样的表单:

<form method="get" action="">
  <fieldset class="animal">
    <input type="checkbox" value="cat">
    <input type="checkbox" value="dog">
    <input type="checkbox" value="bird">
    <input type="checkbox" value="horse">
  </fieldset>
  <fieldset class="country">
    <input type="checkbox" value="japan">
    <input type="checkbox" value="australia">
  </fieldset>
  <input type="submit" name="submit">
</form>

您可以通过迭代每组复选框来构建数据字符串。

$(function(){
  $("form").submit(function(event){
    event.preventDefault();
    var myData = {};
    var dataString = "";
    $("form fieldset").each(function(i1, el1){
      var class = $(el1).attr("class");
      myData[class] = [];
      $(el1).find("[type='checkbox']").each(function(i2, el2){
        if($(el2).is(":checked")){
          myData[class].push($(el2).val());
        }
      });
    });
    if(myData.length){
      $.each(myData, function(k, v){
        dataString += k + "=" + v.join("+") + "&";
      });
      dataString.slice(0,-1);
    } else {
      dataString += "all";
    }
    window.location.href = "http://localhost/project/search.php?" + dataString;
  });
});