如何实现输入框值同步至复选框并生成指定格式URL链接

需求说明 #

• id为profile的文本输入框初始为空，需用户填写用户名
• id为gallery的复选框需实时同步输入框填写的内容作为自身value属性值
• 复选框勾选时，根据输入内容生成两个链接：
  • Profile链接使用输入框的原内容
  • Gallery链接使用输入框内容的小写形式

现有代码 #

HTML代码

<script src="https://videochatencasa.com/buton/jquery-3.4.0.min.js"></script>
<input type="text" placeholder="your username" id="profile">
<br>
<input type="checkbox" id="gallery" name="gallery" value="PROFILE-TEXT">

JS代码

nickname = $('#profile').val();
if (nickname != '') {
  text += "<a href='https://web.com/profile/" + nickname + "/'>Profile</a>\n";
}

nickname = $('#gallery').val();
if (nickname != '') {
  text += "<a href='https://web.com/profile/gallery/" + nickname + "/'>Gallery</a>\n";
}

修正后的完整代码 #

原代码缺少事件监听逻辑，无法实现实时同步和动态生成链接，以下是补全后的可运行代码：

HTML代码

<script src="https://videochatencasa.com/buton/jquery-3.4.0.min.js"></script>
<input type="text" placeholder="your username" id="profile">
<br>
<input type="checkbox" id="gallery" name="gallery" value="PROFILE-TEXT">
<!-- 用于展示生成的链接 -->
<div id="link-display"></div>

JS代码

// 实时同步输入框内容到复选框value
$('#profile').on('input', function() {
  const username = $(this).val();
  $('#gallery').val(username);
  // 如果复选框已勾选，同步更新链接
  if ($('#gallery').is(':checked')) {
    renderLinks();
  }
});

// 监听复选框状态变化，触发链接生成/清除
$('#gallery').on('change', renderLinks);

// 核心链接生成函数
function renderLinks() {
  const $display = $('#link-display');
  $display.empty();
  
  const username = $('#profile').val().trim();
  // 用户名为空时不生成链接
  if (!username) return;

  let linkHtml = '';
  // 生成Profile链接（原内容）
  linkHtml += `<a href='https://web.com/profile/${username}/'>Profile</a><br>`;
  // 生成Gallery链接（小写内容）
  const lowercaseName = username.toLowerCase();
  linkHtml += `<a href='https://web.com/profile/gallery/${lowercaseName}/'>Gallery</a>`;

  $display.html(linkHtml);
}

效果验证 #

当输入框填写HANNA并勾选复选框时，页面会生成如下链接：

<a href='https://web.com/profile/HANNA/'>Profile</a>
<a href='https://web.com/profile/gallery/hanna/'>Gallery</a>

关键修改说明 #

1. 添加input事件监听，实现输入框与复选框value的实时同步
2. 联动复选框change事件和输入框input事件，确保勾选状态下输入内容变化时自动更新链接
3. 对用户名做trim处理，避免空字符或空格导致的无效链接
4. 使用toLowerCase()方法将用户名转换为小写，满足Gallery链接的格式要求
5. 新增链接展示容器，让生成的链接直观显示在页面上

内容的提问来源于stack exchange，提问作者vidchat