Question

我不想使用复选框和javascript来过滤搜索结果。实际上我使用这段代码来改变网址并获得结果，但我会得到这种格式的结果：？A = A1，A2＆amp; B = B1，B2＆amp; C = C1，C2代替？A = A1＆amp; A = A2＆amp; B = B1 $ B = B2和C = C1和C = C2

这是代码

<input type="checkbox" name="a" value="A1" /> A1 Value
            <input type="checkbox" name="a" value="A2" /> A2 Value

            <input type="checkbox" name="b" value="B1" /> B1 Value
            <input type="checkbox" name="b" value="B2" /> B2 Value

            <input type="checkbox" name="c" value="C1" /> C1 Value
            <input type="checkbox" name="c" value="C2" /> C2 Value

            <input type="button" value="Test" onclick="javascript:checkbox_test()">

          <script type="text/javascript">
         // function will loop through all input tags and create
// url string from checked checkboxes
function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
        i = 0,       // loop variable
        url = '',    // final url string
        // get a collection of objects with the specified 'input' TAGNAME
        input_obj = document.getElementsByTagName('input');
    // loop through all collected objects
    for (i = 0; i < input_obj.length; i++) {
        // if input object is checkbox and checkbox is checked then ...
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
            // ... increase counter and concatenate checkbox value to the url string
            counter++;
            url = url + '&c=' + input_obj[i].value;
        }
    }
    // display url string or message if there is no checked checkboxes
    if (counter > 0) {
        // remove first "&" from the generated url string
        url = url.substr(1);
        // display final url string
        alert(url);
        // or you can send checkbox values
        // window.location.href = 'my_page.php?' + url; 
    }
    else {
        alert('There is no checked checkbox');
    }
}
          </script>

Answer 1

你走了：

function checkbox_test() {
  var counter = 0, // counter for checked checkboxes
  i = 0,       // loop variable
  url = '',    // final url string
  // get a collection of objects with the specified 'input' TAGNAME
  input_obj = document.getElementsByTagName('input');

  // loop through all collected objects
  var arr = [];
  for (i = 0; i < input_obj.length; i++) {
    // if input object is checkbox and checkbox is checked then ...
    if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
      // ... increase counter and concatenate checkbox value to the url string
      if (arr.indexOf(input_obj[i].name) == -1) {
        arr.push(input_obj[i].name);
        url = url + '&' + input_obj[i].name + '=';
        counter = 0;
      }
      if (counter > 0) {
        url = url + ',';
      }
      url = url + input_obj[i].value;
      counter++;
    }
  }

  // display url string or message if there is no checked checkboxes
  if (counter > 0) {
    // remove first "&" from the generated url string
    url = url.substr(1);
    // display final url string
    alert(url);
    // or you can send checkbox values
    // window.location.href = 'my_page.php?' + url; 
  }
  else {
    alert('There is no checked checkbox');
  }
}

请参阅DEMO

Answer 2

试试这个：

function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
    i = 0,       // loop variable
    url = new Array(),    // final url string
    input_obj = document.getElementsByTagName('input');
    ck = {};
    for (i = 0; i < input_obj.length; i++) {
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
            if(ck[input_obj[i].name] == undefined) ck[input_obj[i].name] = new Array();
            ck[input_obj[i].name].push(input_obj[i].value);
            counter++;
        }
    }
    for (k in ck) {
        url.push(k + '=' + ck[k].join(','));
    }
    if (counter > 0) {
        alert('?' + url.join('&'));
    }
    else {
        alert('There is no checked checkbox');
    }
}

Answer 3

你最好使用document.querySelectorAll（）而不是自己循环遍历所有这些。请参阅this fiddle。

这是相关部分：

var boxes = document.querySelectorAll("input[type='checkbox']:checked");
if (boxes.length > 0) {
    //convert nodeList to Array and transform to name=value pairs
    var querystring = Array.prototype.slice.call(boxes)
    .map(function (box, index) {
        alert(box);
        return escape(box.name) + '=' + escape(box.value);
    })
    .join("&"); //turn into querystring
    alert(querystring);
}

Javascript将值传递给url

3 个答案: