根据复选框的值创建动态链接

Create a dynamic link based on checkbox values

本文关键字：创建动态链接复选框更新时间：2023-09-26

我想要实现的是:

页面默认状态=未选中复选框，未显示链接
用户勾选一个(或多个)复选框
链接出现，从复选框值动态生成，格式如下:http://example.com/?subject=Products&checked=Blue,Green,Purple(其中选中的复选框值为"蓝色"，"绿色"answers"紫色")

到目前为止，根据另一个问题的建议(使用JavaScript将复选框值加载到字符串中)，我已经能够通过按钮将正确格式的值(作为所需url的一部分)打印到console.log:

$("button").on("click", function(){
	var arr = []
	$(":checkbox").each(function(){
	   if($(this).is(":checked")){
		 arr.push($(this).val())
	   }
	})
	var vals = arr.join(",")
	var str = "http://example.com/?subject=Products&" + vals
	console.log(str)	
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" id="selected" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" id="selected" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" id="selected" name="selected" value="Purple" class="products"> Purple
<br>
<button>button</button>

然而，他们没有根据所选的复选框动态加载(它需要你按下按钮才能生成url)，链接没有打印到页面供访问者使用(它卡在console.log中，可见但不可用)。

有人告诉我，在动态生成链接方面，.change()可能是这里的方式。类似于:jQuery复选框更改和点击事件。

我如何合并这两种方法来实现我正在寻找的结果?

这会给你一个url

http://example.com/?subject=Products&checked=Blue,Green,Purple

(可能更好的方式见下文):

$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
  var vals = arr.join(",")
  var str = "http://example.com/?subject=Products&checked=" + vals;
  var link = arr.length > 0 ? '<a href="'+str+'">Click me</a>': '' ;
  
  $('.link-container').html(link);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="mod-link" name="selected" value="Blue" class="products">Blue
<br>
<input type="checkbox" class="mod-link" name="selected" value="Green" class="products">Green
<br>
<input type="checkbox" class="mod-link" name="selected" value="Purple" class="products">Purple
<br>
<div class="link-container"></div>

然而

我会做得不一样。

我会选择以下url结构:

http://example.com/?subject=Products&checked[]=Blue&checked[]=Green&checked[]=Purple

当它被PHP接收时，检查将是一个像['Blue','Green','Purple']这样的数组，而不是像'Blue,Green,Purple'这样的字符串

$(document).on("change", ".mod-link", function() {
  var arr = []
  $(".mod-link:checked").each(function() {
    arr.push($(this).val());
  })
  var vals = 'checked[]=' + arr.join("&checked[]=")
  var str = "http://example.com/?subject=Products&" + vals;
  var link = arr.length > 0 ? '<a href="'+str+'">Click me</a>': '' ;
  
  $('.link-container').html(link);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="mod-link" name="selected" value="Blue" class="products">Blue
<br>
<input type="checkbox" class="mod-link" name="selected" value="Green" class="products">Green
<br>
<input type="checkbox" class="mod-link" name="selected" value="Purple" class="products">Purple
<br>
<div class="link-container"></div>

如果我对你的问题理解正确的话，我相信你的思路是对的。我按照您的建议在您的复选框上添加了更改事件。试试下面修改后的代码。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" name="selected" value="Purple" class="products"> Purple
<br>
<span class="link"></span>

JavaScript

$("input[type=checkbox]").on("change", function(){
    var arr = []
    $(":checkbox").each(function(){
       if($(this).is(":checked")){
         arr.push($(this).val())
       }
    })
    var vals = arr.join(",")
    var str = "http://example.com/?subject=Products&checked=" + vals
    console.log(str);
  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }  
})

工作CodePen

你的button不再被使用。这就是你要找的吗?