当前位置： 文江博客话题详情

如何在输入类型收音机中获取文本标签？

发布于 2025-02-12 10:04:16 字数 3593 浏览 0 评论 0原文

我做了这样的自定义收音机输入。 选择后，如何在无线电类型输入中获取文本标签的值并将其带入语法超链接“顺序链接”中？

let result = document.querySelector('#result');
  document.body.addEventListener('change', function (e) {
    let target = e.target;
    let message;
    switch (target.id) {
      case '30day':
        message = 'selected 30d package';
        break;
      case '6month':
        message = 'selected 6m package';
        break;
      case '1year':
        message = 'selected 1y package';
        break;
                     }
    result.textContent = message;
  });
body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked+label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked+label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked+label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}
<!-- custom radio selected -->
 <div class="select" style="margin:20px;" tabindex="1">
  <input class="selectopt" name="package" type="radio" id="" checked>
  <label for="" class="option">Select package</label>

  <input class="selectopt" name="package" type="radio" id="30day">
  <label for="30day" class="option">30 d package</label>

  <input class="selectopt" name="package" type="radio" id="6month">
  <label for="6month" class="option">6 m package</label>

  <input class="selectopt" name="package" type="radio" id="1year">
  <label for="1year" class="option">1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <!-- Order Link -->
 <a href="https://api.whatsapp.com/send?phone=123456789&text=Hello%20I%20want%20to%20order%20(this is the package label value text)
" target="_blank">order link</a>

除此之外，如何为JavaScript中的多个电话号码创建一个变量，每次打开或刷新“订单链接”超链接部分时，每次打开或刷新电话号码时，它是随机数“发送？电话= 123456789”将随机更改。

我的意思是随机电话号码是预定义的，例如，每次打开网页或刷新时，都有5个选择的电话号码，例如：“ 123456789，1987654321,122223455,11222222334455,11222334455,112222334455 ，165456781“ 则似乎更好。

<p id="result" style="color:#fff;"></p>

如果“订单链接”单击但以前选择的自定义选择，

原文

I made a custom radio input like this.
When selected, How do I get the value of the text label in the radio type input and bring it into the Syntax hyperlinks "Order Link"?

let result = document.querySelector('#result');
  document.body.addEventListener('change', function (e) {
    let target = e.target;
    let message;
    switch (target.id) {
      case '30day':
        message = 'selected 30d package';
        break;
      case '6month':
        message = 'selected 6m package';
        break;
      case '1year':
        message = 'selected 1y package';
        break;
                     }
    result.textContent = message;
  });
body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked+label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked+label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked+label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}
<!-- custom radio selected -->
 <div class="select" style="margin:20px;" tabindex="1">
  <input class="selectopt" name="package" type="radio" id="" checked>
  <label for="" class="option">Select package</label>

  <input class="selectopt" name="package" type="radio" id="30day">
  <label for="30day" class="option">30 d package</label>

  <input class="selectopt" name="package" type="radio" id="6month">
  <label for="6month" class="option">6 m package</label>

  <input class="selectopt" name="package" type="radio" id="1year">
  <label for="1year" class="option">1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <!-- Order Link -->
 <a href="https://api.whatsapp.com/send?phone=123456789&text=Hello%20I%20want%20to%20order%20(this is the package label value text)
" target="_blank">order link</a>

In additional to, how do I create a variable for multiple phone numbers in javascript that works to be a random number every time a web page is opened or refreshed the phone number in the "Order Link" hyperlinks section "send?phone=123456789" will change randomly.

What I mean by random phone numbers are pre-defined ones, for example there are 5 choices of phone numbers to be randomized every time web page is opened or refreshed for eg random number is: "123456789,1987654321,122334455,112233445,165456781"
and it seems better with the warning text shown on

<p id="result" style="color:#fff;"></p>

if "order link" clicked but custom selected not selected before.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

夜巴黎 2025-02-19 10:04:16

是的，您可以通过获得等于无线电ID的属性来获取广播的标签。

另外，我添加了一个函数以生成具有特定长度的随机数以生成电话号码。

我使用encodeuricomponent来编码text查询参数，因为其中有空格。

const getRandomPhoneNumber = () => {
  const phoneNumbers = ["123456789", "1987654321", "122334455",               "112233445", "165456781"]
  const randomIndex = Math.floor(Math.random() * (phoneNumbers.length))
  return phoneNumbers[randomIndex]
}

const phoneNumber = getRandomPhoneNumber()
let result = document.querySelector('#result');
const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const url = "https://api.whatsapp.com/send";
let changed = false;

const updateLink = (message) => {
  let newUrl = url;
  result.textContent = message;
  newUrl += `?phone=${phoneNumber}`
  newUrl += `?text=${encodeURIComponent(`Hello I want to order ${message}`)}`
  link.href = newUrl
}

updateLink('')

document.getElementById('select').addEventListener('change', function (e) {
  changed = true;
  warning.innerText = '';
  let target = e.target;
  const label = document.querySelector(`[for='${target.id}']`)
  let message = label.innerText;
  updateLink(message)
});
  
  
link.addEventListener('click', () => {
  if (!changed) {
    warning.innerText = 'You need to select a package.'
    return;
  }
})
body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked+label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked+label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked+label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}
<!-- custom radio selected -->
 <div class="select" id="select" style="margin:20px;" tabindex="1">
  <input class="selectopt" name="package" type="radio" id="" checked>
  <label for="" class="option">Select package</label>

  <input class="selectopt" name="package" type="radio" id="30day">
  <label for="30day" class="option">30 d package</label>

  <input class="selectopt" name="package" type="radio" id="6month">
  <label for="6month" class="option">6 m package</label>

  <input class="selectopt" name="package" type="radio" id="1year">
  <label for="1year" class="option">1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <p id="warning" style="color:#FFA500;"></p>
 <!-- Order Link -->
 <a id="link" href="" target="_blank">order link</a>

Yes, You can get the label of the radio by getting its for attribute which equals the id of the radio.

Also, I add a function to generate random numbers with specific length to generate the phone number.

I used encodeURIComponent to encode the text query parameter because there are spaces in it.

const getRandomPhoneNumber = () => {
  const phoneNumbers = ["123456789", "1987654321", "122334455",               "112233445", "165456781"]
  const randomIndex = Math.floor(Math.random() * (phoneNumbers.length))
  return phoneNumbers[randomIndex]
}

const phoneNumber = getRandomPhoneNumber()
let result = document.querySelector('#result');
const link = document.querySelector('#link');
const warning = document.querySelector('#warning');
const url = "https://api.whatsapp.com/send";
let changed = false;

const updateLink = (message) => {
  let newUrl = url;
  result.textContent = message;
  newUrl += `?phone=${phoneNumber}`
  newUrl += `?text=${encodeURIComponent(`Hello I want to order ${message}`)}`
  link.href = newUrl
}

updateLink('')

document.getElementById('select').addEventListener('change', function (e) {
  changed = true;
  warning.innerText = '';
  let target = e.target;
  const label = document.querySelector(`[for='${target.id}']`)
  let message = label.innerText;
  updateLink(message)
});
  
  
link.addEventListener('click', () => {
  if (!changed) {
    warning.innerText = 'You need to select a package.'
    return;
  }
})
body {
  background:#2d2d2d;
  display:block;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:20;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.select {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 50%;
  height: 40px;
}

.option {
  padding: 0 30px 0 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: #333;
  border-top: #222 solid 1px;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  order: 2;
  z-index: 1;
  transition: background .4s ease-in-out;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;

}

.option:hover {
  background: #666;
}

.select:focus .option {
  position: relative;
  pointer-events: all;
}

input {
  opacity: 0;
  position: absolute;
  left: -99999px;
}

input:checked+label {
  order: 1;
  z-index: 2;
  background: #666;
  border-top: none;
  position: relative;
}

input:checked+label:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  pointer-events: none;
  z-index: 3;
}

input:checked+label:before {
  position: absolute;
  right: 0;
  height: 40px;
  width: 40px;
  content: '';
  background: #666;
}
<!-- custom radio selected -->
 <div class="select" id="select" style="margin:20px;" tabindex="1">
  <input class="selectopt" name="package" type="radio" id="" checked>
  <label for="" class="option">Select package</label>

  <input class="selectopt" name="package" type="radio" id="30day">
  <label for="30day" class="option">30 d package</label>

  <input class="selectopt" name="package" type="radio" id="6month">
  <label for="6month" class="option">6 m package</label>

  <input class="selectopt" name="package" type="radio" id="1year">
  <label for="1year" class="option">1 y package</label>
 </div>
 <br/>
 <!-- selected text result -->
 <p id="result" style="color:#fff;"></p>
 <p id="warning" style="color:#FFA500;"></p>
 <!-- Order Link -->
 <a id="link" href="" target="_blank">order link</a>

回复 原文
~没有更多了~

关于作者

淑女气质

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文