Question

我正在尝试制作表格。它的工作方式是用户从10个多选复选框中选择最多3个选项。然后，他们单击确认位置按钮。最后，他们点击发送电子邮件链接。基本上，当他们单击确认位置按钮时，它会根据多个复选框中的选择（最多3个）更改发送电子邮件链接中的mailto链接。但是，我无法想象的是如何设置多个选择复选框（最大限制为3和最小值为1），然后在mailto链接中添加单个/多个电子邮件值。我已设法为下拉列表（仅1个选项，因此只有1个电子邮件）执行此操作，但我无法弄清楚上述情况。请帮忙！

<form>Select your place:
    <select id="mySelect">
        <option value="email@domain.com">Location 1</option>
        <option value="email2@domain.com">Location 2</option>
        <option value="email3@domain.com">Location 3</option>
        <option value="email4@domain.com">Location 4</option>
    </select>
</form>
<button type="button" onclick="displayResult()">Confirm Location</button>
<a id="myEmailList" href="mailto:">Send email</a>
<script type="text/javascript">
function displayResult() {
    var x = document.getElementById("mySelect");
    t = x.value
    document.getElementById("myEmailList").href = "mailto:"t;
}
</script>

Answer 1

<强> JS

  function displayResult() {
    var se = document.getElementById("myEmailList"),
        send = document.getElementById("send"),
        x = document.getElementById("mySelect"),
        l = [],

        // get all checkboxes inside our fieldset that are checked

        list = x.querySelectorAll(":checked");

    // loop the list and push the email stored in value to our array list 
    for (i = 0; i < list.length; i++) {
        l.push(list[i].value);
    }

    // use array.join(",") to create a nice email list deliminated by commas
    send.href = "mailto:" + l.join(", ");
    se.innerHTML = l.join(", ");
  }

<强> HTML

    <input type="checkbox" value="email1@domain.com">l1
        <br>
        <input type="checkbox" value="email2@domain.com">l2
        <br>
        <input type="checkbox" value="email3@domain.com">l3
        <br>
        <input type="checkbox" value="email4@domain.com">l4
        <br>
    </fieldset>
</form>
<button type="button" onclick="displayResult()">Confirm Location</button>
<a id="send" href="mailto:">Send email</a>

<div id="myEmailList"></div>

FIDDLE DEMO：

http://jsfiddle.net/oojmygwy/1/

基于多个复选框选择，“mailto：”链接使用javascript更改为“mailto：multiple variables”

1 个答案: