时间戳

首页 > 解决方案 > 选中后将 href 链接添加到复选框

javascript - 选中后将 href 链接添加到复选框

问题描述

因此，当用户单击“自定义”时，我目前已经在 HTML 中编码，会弹出一个带有复选框的模式。一旦选中复选框并且用户单击“提交”，用户选择的内容将显示在页面上，并且模式将消失。我想要做的是，一旦选择，将所选内容变成链接（href）。我已经将它放在使复选框内容成为模式中的链接的位置，但我不希望它在那里，我希望它在被选中并且用户单击提交后转换为链接。以下是我目前在 HTML 和 JS 中的代码

$('#youtube').change(function() {
  var chb = document.getElementsByClassName('chkbx');

  if (chb[0].checked) {
    console.log("YOUTUBE selected");
    $(this).next().html("<a href='https://www.youtube.com/'>YOUTUBE</a>");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
  <div class="modal-header">
    <div class="title">Please select preferred websites: </div>
    <button data-submit-button class="submit-button" onclick="getValue()">Submit</button>
  </div>

  <div class="modal-body">
    <input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE <br>

标签： javascripthtml

解决方案

如果你有下一个东西，你只能使用下一个

否则使用 .after() 或 parent().append()

$('#youtube').on("click",function() {
  if (this.checked) {
    console.log("YOUTUBE selected");
    $(this).parent().next().html("<a href='https://www.youtube.com/'>YOUTUBE</a>");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
  <div class="modal-header">
    <div class="title">Please select preferred websites: </div>
    <button type="button" data-submit-button class="submit-button">Submit</button>
  </div>

  <div class="modal-body">
    <label><input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE </label>
    <span>This is the next</span>
  </div>
</div>

如果您希望复选框成为链接，也可以使用 replaceWith

点击提交时在这里

$('.submit-button').on("click",function() {
  const $check = $("#youtube")
  if ($check.is(":checked")) {
    console.log("YOUTUBE selected");
    $check.parent().replaceWith("<a href='https://www.youtube.com/'>YOUTUBE</a>");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal active" id="modal">
  <div class="modal-header">
    <div class="title">Please select preferred websites: </div>
    <button type="button" class="submit-button">Submit</button>
  </div>

  <div class="modal-body">
    <label><input type="checkbox" class="chkbx" id="youtube" name="website" value="youtube"> YOUTUBE</label> 
  </div>
</div>

推荐阅读