Question

我想要实现的目标是：

默认状态页面=没有勾选复选框，没有显示链接
用户勾选一个（或多个）复选框
按照以下格式从复选框值动态生成链接：http://example.com/?subject=Products&checked=Blue,Green,Purple（其中所选复选框值为＆＃34;蓝色＆＃34;，＆＃34;绿色＆＃34;和＆＃ 34;紫＆＃34）

到目前为止，根据另一个问题（Using JavaScript to load checkbox Values into a string）的建议，我已经能够以适当的格式（作为所需网址的一部分）获取打印到console.log的值。按钮：

＆＃13;

$("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)	
})

＆＃13;

<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>

＆＃13;

但是，他们没有根据所选的复选框动态加载（它要求您按下按钮以生成网址）并且链接尚未打印到页面供访问者使用（它被卡在console.log中，可见但不可用）。

我已经被告知，在动态生成链接方面.change()可能是这里的方式。类似于：jQuery checkbox change and click event。

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

Answer 1

如果我理解你的问题，我相信你是在正确的轨道上。我按照你的建议在你的复选框上添加了更改事件。请尝试以下修改后的代码。

HTML

AAA

的JavaScript

<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>

Working CodePen

您的$("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(''); } })已不再使用。这是你在找什么？

Answer 2

这可以为您提供

的网址

ResultSet

（见下文可能更好的方法）：

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>

当PHP接收到它时，检查将是一个类似http://example.com/?subject=Products&checked[]=Blue&checked[]=Green&checked[]=Purple的数组，而不是像'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);
});

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

2 个答案:

然而