Question

我想将选中的复选框值作为url参数添加到我的链接中。这就是我所拥有的：

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>

<script>
    $(".checkbox").on("change", function() {
        console.log('fzef');
        var values = [];
        $('.checkbox:checked').each(function() {
            var result = $(this).val();
            values.push(result);
        });
        $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
    });

    // Init link on page load
    $(".checkbox").trigger("change");
</script>

预期结果为＆＃34; http://www.example.com/test.html?bx1=1&bx2=1＆＃34;。我希望有人可以帮助我。

感谢这些界限：

&on&

我在我的值之间得到var margin = { top: 30, right: 20, bottom: 30, left: 50 }, width = 600 - margin.left - margin.right, height = 270 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%d-%b-%y").parse; // Set the ranges var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); // Define the axes var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(20); // Define the line var valueline = d3.svg.line() .x(function (d) { return x(d.dategraph); }) .y(function (d) { return y(d.assetcount); }); // Adds the svg canvas var svg = d3.select("linegrapg") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var dataset = [{"dategraph":"16-Nov-16","assetcount":299},{"dategraph":"19-Nov-16","assetcount":0}, {"dategraph":"08-Nov-16","assetcount":18},{"dategraph":"14-Nov-16","assetcount":10}, {"dategraph":"17-Nov-16","assetcount":2},{"dategraph":"18-Nov-16","assetcount":0}] data = JSON.parse(dataset.d); data.forEach(function (d) { d.Letter = parseDate(d.dategraph); d.Freq = +d.assetcount; }); // Scale the range of the data x.domain(d3.extent(data, function (d) { return d.Letter; })); y.domain([0, d3.max(data, function (d) { return d.Freq; })]); // Add the valueline path. svg.append("path") .attr("class", "line") .attr("d", valueline(data)); // Add the X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .call(yAxis); } }并且它在IE上不起作用。任何的想法？谢谢！

Answer 1

你可以这样做：

<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>

<script>
    $(".checkbox").on("change", function() {console.log('fzef');
        var values = [];
        $('.checkbox:checked').each(function() {
            var result = $(this).val();
            values.push(result);
        });
        $(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
    });

    // Init link on page load
    $(".checkbox").trigger("change");
</script>

Answer 2

在表单中包装复选框，给它们命名并让jQuery使用.serialize()完成工作：

＆＃13;

$(function() {
  $("form").on("change", function() {
    var href = "http://www.example.com/test.html",
        params = $(this).serialize();

    if (params.length > 0) {
      href += "?" + params;
    }

    console.log(href);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1
  <input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2
</form>

＆＃13;

Answer 3

您需要做的更正是在行中 var key = $(".link").html(values.join("&"));

您需要将其更改为
var key = values.join("&");

<强>为什么吗
因为代码中没有.link选择器。

Answer 4

尝试这样：你需要document.write()

 document.write('<a href="http://www.example.com/test.html?' + values.join('&') + '">http://www.example.com/test.html?' + values.join('&')+'</a>');

或

$("button").on("click", function() {
        var values = [];
        $('.checkbox:checked').each(function() {
           var  result = $(this).val();
            values.push(result);
        });
   
    
  
  $('#url').attr('href','http://www.example.com/test.html?' + values.join('&') );
   $('#url').html('http://www.example.com/test.html?' + values.join('&'))
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label>
<button >Go</button>
<a id="url"></a>

使用javascript将复选框值添加到链接

4 个答案: