原生封装单选框

原生

<template>
  <m-page>
    <div slot="content">
      <div class="box">
        <div class="options" id="options">
            <div class="box-warp">
              <a href="javascript:;">
                <p class="p">ss</p>
                <span class="span">油性漆参加问卷调查吗？</span>
              </a>
            </div>
            <div class="box-warp">
              <a href="javascript:;">
                <p class="p">ss</p>
                <span class="span">油性漆参加问卷调查吗？</span>
              </a>
            </div>
            <div class="box-warp">
              <a href="javascript:;">
                <p class="p">ss</p>
                <span class="span">油性漆参加问卷调查吗？</span>
              </a>
            </div>
            <div class="box-warp">
              <a href="javascript:;">
                <p class="p">ss</p>
                <span class="span">油性漆参加问卷调查吗？</span>
              </a>
            </div>
        </div>
    </div>
    </div>
  </m-page>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  methods: {
  },
  mounted(){
     var list = document.querySelectorAll(".options .box-warp a .p"); //先获取所有标签
        console.log(list); //类数组
        // list.onclick = function() { //一组元素不能直接操作，只能通过下标操作，哪怕这组元素只有一个

        // }
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function() {
            
                for (var i = 0; i < list.length; i++) {
                    if (this == list[i]) { //this 是当前操作的option,如果list[i]和this相等，说明list[i]就是我们当前操作的这一项
                        console.log(this)
                        this.classList.add("checked");
                    } else {
                        list[i].classList.remove("checked");
                    }
                }

            }

        }
  }
}
</script>

<style lang="less" scoped>
.options{
  // display: flex;
  .box-warp{
    >a {
        display: flex;
        color: #333;
        margin: 20px;
        .p{

        }
    }
            
    .checked {
        color: red!important;
    }
  }
}
</style>