Question

我创建了一个带复选框的表单。当用户选择所请求的复选框并点击提交按钮时，它将返回值作为网页链接。我可以获取要显示的项目，但不知道如何使用查询正确编写url值。任何帮助将不胜感激。

  <form>
  <br>
  <input type="checkbox" name="http://www.google.com" name="check" value="Option 1" id="ch1">
  <label for="ch1">Checkbox 1</label>

  <input type="checkbox" name="http://www.yahoo.com"name="check" value="Option 2" id="ch2">
  <label for="ch2">Checkbox 2</label>

  <input type="checkbox" name="http://www.weather.com" value="Counseling Services" id="ch3">
  <label for="ch3">Checkbox 3</label>

  <input type="checkbox" name="http://www.cnn.com" value="Financial Aid" id="ch4">
  <label for="ch4">Checkbox 4</label>

  <input type="checkbox" name="http://www.foxnews.com" value="Fitness and Recreation" id="ch5">
  <label for="ch5">Checkbox 5</label>

  <input type="checkbox" name="http://www.gmail.com" value="Health Services" id="ch6">
  <label for="ch6">Checkbox 6</label>
  </form>

  <button>Show Results</button>
  <p>Results:<span id="results"></span></p>

  function showValues() {

  var fields = $( ":input" ).serializeArray();
  $( "#results" ).empty();
  jQuery.each( fields, function( i, id, name ) {
  $( "#results" ).append(' <a href= "input.name" > ' + id.value + " " );
  });
  }

  $( "button" ).click( showValues );
  $( "select" ).change( showValues );
  showValues();

Here is my JFiddle.

Answer 1

尝试

function showValues() {

    var fields = $(":input").serializeArray();
    $("#results").empty();
    jQuery.each(fields, function (idx, obj) {
        $("#results").append('<a href= "' + obj.name + '" >' + obj.value + "</a>");
    });
}

演示：Fiddle

Answer 2

在值属性中写入url，它将起作用

value属性指定在提交表单时要发送到服务器的值

<form>
 <br>
  <input type="checkbox"  name="check[]" value="http://www.google.com" id="ch1">
  <label for="ch1">Checkbox 1</label>
  <br/>

   <input type="checkbox" name="check[]" value="http://www.yahoo.com" id="ch2">
   <label for="ch2">Checkbox 2</label>
  <br/>

  <input type="checkbox" name="check[]" value="http://www.weather.com" id="ch3">
  <label for="ch3">Checkbox 3</label>
  <br/>

  <input type="checkbox"name="check[]" value="http://www.cnn.com" id="ch4">
  <label for="ch4">Checkbox 4</label>
  <br/>

   <input type="checkbox" name="check[]" value="http://www.foxnews.com" id="ch5">
   <label for="ch5">Checkbox 5</label>
       <br/>

   <input type="checkbox" name="check[]" value="http://www.gmail.com" id="ch6">
   <label for="ch6">Checkbox 6</label>
      <br/>
</form>
<br/>
<button>Show Results</button>
<p>Results:<span id="results"></span></p>

如果您需要

，请将名称添加到名称以存储为数组

Useful Link

使用JQuery序列化数组的表单

2 个答案: