Javascript 如何在复选框中组合相同的命名值并为它们指定默认值

这是我的密码

<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时，它看起来像

但是我希望URL看起来像这样

如果我没有选中复选框，那么“all”应该是默认值吗

---

扩展我的评论，当您有如下表单时：

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

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>

---

扩展我的评论，当您有如下表单时：

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

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>

---

如果你能使用JavaScript，你可以做一些简单的事情：
我使用了一个

隐藏的
输入
，它是根据选中的
复选框来填充的。

（有关详细信息，请参见我的代码段中的注释）


var cbs=document.querySelectorAll（'input[type=checkbox][name=animals]）；//获取所有复选框
var animals=document.querySelector（'input[type=text][name=animal]）；//获取隐藏的输入
var country=document.querySelector（'input[type=text][name=country]）；//获取国家信息
//更新隐藏输入的函数
功能更新(动物){
var temp=[]；//临时空数组
对于（var i=0；i


动物：


  ← 单击以查看我们应该去的url
如果你能使用JavaScript，你可以做一些简单的事情：

我使用了一个
隐藏的
输入
，它是根据选中的
复选框来填充的。

（有关详细信息，请参见我的代码段中的注释）


var cbs=document.querySelectorAll（'input[type=checkbox][name=animals]）；//获取所有复选框
var animals=document.querySelector（'input[type=text][name=animal]）；//获取隐藏的输入
var country=document.querySelector（'input[type=text][name=country]）；//获取国家信息
//更新隐藏输入的函数
功能更新(动物){
var temp=[]；//临时空数组
对于（var i=0；i


动物：


  ← 单击以查看我们应该去的url
欢迎来到堆栈溢出。这是HTML表单的预期行为。如果您想让它传递另一个值，您可能需要使用JavaScript或jQuery以您想要的方式格式化HTTP请求，而不是HTML的方式。欢迎使用堆栈溢出。这是HTML表单的预期行为。如果您希望它通过另一个值，您可能需要使用JavaScript或jQuery来格式化HTTP请求，而不是HTML的方式。可能会考虑隐藏文本字段，并使用复选框来命名复选框。这样，
animal
将被文本填充，复选框可以忽略。@Twisty我刚刚做了一些修改。：）不错的选择！是的，我也尝试过这段代码，但我只在控制台中看到结果，所以我如何将其移动到URL@Nico261Nico我已经添加了<代码>表单<代码> >代码>提交< /COD>。可以考虑隐藏文本字段，并使用复选框来命名复选框。这样，
animal
将填充文本和复选框