代码之家 › 专栏 › 技术社区 › kaitlynmm569

自定义单选按钮精度

css html javascript

-1

kaitlynmm569 · 技术社区 · 1 年前

我目前有两个自定义样式的单选按钮。样式和单选按钮代码主要在网上找到,我根据需要做了一些更改。我遇到的问题是,如果您在框外单击,它仍然会选择一定的距离,但不会触发相关的单击事件。

let calcType = document.querySelector('#calcType')
let calcTypeLabels = document.querySelectorAll('.styled-label span')

calcTypeLabels.forEach((check) => {
check.addEventListener('click', (ev) => {
    let parent = ev.target.parentElement
    if (parent.querySelector('input').checked == false) {
        parent.querySelector('input').checked = true
        console.log("clicked radio button")
        // setCalcType(parent.querySelector('input').value)
        // currentType = parent.querySelector('input').value
        // setRangeStyle()
    }
})
})

/* Custom Radio Buttons */

.styled-radio {
  display: none;
}

.styled-label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  /* This is the element that senses the clicks */
}

.styled-label span {
  position: relative;
  line-height: 22px;
}

.styled-label span:before,
.styled-label span:after {
  content: "";
}

.styled-label span:before {
  border: 1px solid #222021;
  width: 20px;
  height: 20px;
  /* margin-right: 10px; */
  display: inline-block;
  vertical-align: top;
}

.styled-label span:after {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 4px;
  transition: 300ms;
  opacity: 0;
}

.styled-label input:checked + span:after {
  opacity: 1;
}

.radio-label::after {
  pointer-events: none;
}

.styled-label span:after {
    background-color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <link href="./example.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <label class="styled-label">
            <label class="radio-label" for="calcType">Difficulty</label>
            <br />
            <input
                class="styled-radio"
                id="calcType"
                type="radio"
                name="calcType"
                value="diff"
                checked
            />
            <span></span>
        </label>

        <label class="styled-label">
            <label class="radio-label" for="calcType">Study Days</label>
            <br />
            <input
                class="styled-radio"
                id="calcType"
                type="radio"
                name="calcType"
                value="days"
            />
            <span></span>
        </label>

        <script src="./example.js"></script>
    </body>
</html>

我有没有办法通过停止某些元素上的点击事件来解决这个问题(尝试了一些::在事情发生后,但什么都不起作用),或者可能使用不同的方式来设置单选按钮的样式。

1 回复 | 直到 1 年前

Abdullah Almofleh 1 年前

HTML代码错误;这个 id 需要独特,其他事情必须改变。当你把 for 属性,你告诉我,如果我点击标签,我会选择单选输入,这就是为什么当你点击输入旁边时会选择它。不,对于您面临的问题,如果您想在每次选择单选按钮时触发事件,可以使用 change 事件而不是 click 并将事件放在输入本身上。这样地:


let calcTypeLabels = document.querySelectorAll('[name="calcType"]')



    calcTypeLabels.forEach((check) => {
      check.addEventListener('change', (ev) => {
        console.log("clicked radio button")

        let parent = ev.target.parentElement
        if (parent.querySelector('input').checked == false) {
          parent.querySelector('input').checked = true
          console.log("clicked radio button")
        }
      })
    })

现在,每当价值发生变化时,你都可以倾听。

但是JS中的主要问题是将事件附加到 span 在具有输入宽度和高度的标签内,但当您单击标签或周围空间时 对于 将触发 改变 事件,并自动更改值。但是 点击 不会开火,因为你没有点击 跨度;跨越;持续时间;(桥或拱的)墩距;跨距; 包括(广大地区) 要素请注意函数中的选择器 querySelectorAll .

如果您想注册 点击 具体来说,告诉我,我可以查看。