Question

所以我在表单中有8个复选框的列表。这些复选框应该控制将加载到框架中的链接。但是我不知道从哪里开始...
Checkbox1（appendThis1） - 已检查
Checkbox2（appendThis2）
Checkbox3（appendThis3） - 已检查
Checkbox4（appendThis4）
Checkbox5（appendThis5） - 已检查
Checkbox6（appendThis6）
Checkbox7（appendThis7）
Checkbox8（appendThis8）

基于此，我将有一个基本URL，如http://www.google.com，因为checkbox1,3和5检查appendThis1，appendThis2，appendThis3将被添加到url的末尾，但没有其他复选框会将任何内容附加到URL。每个复选框都会在URL中添加或删除其特定参数此外，每当选中复选框时，它都会重新加载URL。

Answer 1

我将采取的方式如下

确保在你的html表单中，所有的checbox都有相同的名称，最后用空方括号，这样你就可以在php中得到一个数组。作为值，您应该设置要附加到html的字符串。像这样：

<input type="checkbox" value="q=something" name="myCheckboxes[]" /> option 1 <input type="checkbox" value="lang=en" name="myCheckboxes[]" /> option 2 ...

在您的PHP代码中，只是通过帖子回到内部，并将其附加到您的HTML。（点击此处查看更多信息http://www.html-form-guide.com/php-form/php-form-checkbox.html）。伪代码看起来像这样：

$url = 'http://www.google.com?'; $checkboxes = $_POST['myCheckboxes']; $url .= implode('&', $checkboxes);
选中复选框时自动提交，您需要一些客户端脚本。我的选择是jQuery，它看起来像这样：

$('#myForm input[type="checkbox"]').change(function() { $('#myForm').submit(); };

请注意，没有任何代码经过测试，但它应该可以正常工作，或者至少指向正确的方向。当然欢迎更正！

Answer 2

原始Javascript的示例。您可以使用生成的网址加载iframe。

jsFiddle

<script language='javascript'>

arr_sel = new Array();


function constructURL(cv)
{
  if (arr_sel.length==0)
  {
     arr_sel.push(cv);
  } else {

    if (inArray(cv, arr_sel))
    {
        key = getKey(cv, arr_sel);
        arr_sel.splice(key,1);
    } else {
        arr_sel.push(cv);
    }

  }
  makeURL(arr_sel);

}
function inArray(val, arr) 
{
    var length = arr.length;
    for(var i = 0; i < length; i++) {
        if(arr[i] == val) return true;
    }
    return false;
}

function getKey(val, arr)
{
  for (var i = 0; i < arr.length; i++) 
  {
    if (arr[i]==val)
      return i
  }
}

function makeURL(arr_sel)
{

  opts = new String; 
  arr_opts = new Array();
  for (var i = 0; i < arr_sel.length; i++) 
  {
    arr_opts.push(arr_sel[i]);
  }
  url = 'http://google.com?' + arr_opts.join('&');

  document.getElementById('myurl').innerHTML = url;

}
</script>

<input type=checkbox name=whatever value='opt1=foo' onClick="constructURL(this.value)"> foo <br>
<input type=checkbox name=whatever value='opt2=bar' onClick="constructURL(this.value)"> bar <br>

<div id='myurl'>http://google.com?</div>

根据复选框将参数附加到URL

2 个答案: