文章/答案/技术大牛

发布

社区首页 >问答首页 >从两个没有正确使用切换的元素单击onclick

问从两个没有正确使用切换的元素单击onclick
EN

Stack Overflow用户

提问于 2022-07-07 08:38:02

回答 1查看 42关注 0票数 -2

我希望在单击输入时隐藏带有id="hidden-gift-order"的div标记，并使用class="checkmark"隐藏div标记。当我单击input时，它可以工作，但单击div标记时不起作用。有人能解释一下为什么吗？

function Toggle_Visibility(p1) {
  document.getElementById(p1).classList.toggle("d-none");
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="form-field col-lg-12 mb-6">
  <label class="checkbox-container ps-4 cursor-pointer" id="orderasgift">
        <input id="giftbox" onclick="Toggle_Visibility('hidden-gift-order')" class="gift-order-checkbox" type="checkbox">
        <div class="checkmark" onclick="Toggle_Visibility('hidden-gift-order')"></div>
      </label>
</div>
<div class="d-none" id="hidden-gift-order">...</div>

更新:因此，div标记是一个自定义复选框，我想使用它而不是给我们的默认复选框。当我单击标签内的输入和div时，我希望它触发Toggle_Visibility()并切换div#隐藏礼品顺序的div类。我正在添加CSS部分的代码！

PS:代码片段不起作用，所以不要介意，谢谢！

CSS：

    /* Hide the browser's default checkbox */
    .checkbox-container .gift-order-checkbox {
        position: absolute;
      opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: var(--bs-white);
        border: solid var(--bs-primary);
    }
    
    /* On mouse-over, add a grey background color */
    .checkbox-container:hover input ~ .checkmark {
        background-color: var(--bs-light);
    }

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--bs-white);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--bs-primary);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--bs-primary);
}

javascript

html

bootstrap-4

回答 1

Stack Overflow用户

发布于 2022-07-07 08:52:21

尝试不要将输入和div放在标签中，因为当您单击div时，输入也会被单击，我尝试这个和它的工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer>
      function Toggle_Visibility(p1) {
        document.getElementById(p1).classList.toggle("d-none");
      }
    </script>
  </head>
  <body>
    <div class="form-field col-lg-12 mb-6">
        <input
          id="giftbox"
          onclick="Toggle_Visibility('hidden-gift-order')"
          class="gift-order-checkbox"
          type="checkbox"
        />
        <div
          class="checkmark"
          onclick="Toggle_Visibility('hidden-gift-order')"
        >sdf
    </div>
    </div>
    <div class="d-none" id="hidden-gift-order">...</div>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72894716

复制

相似问题

问从两个没有正确使用切换的元素单击onclick
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从两个没有正确使用切换的元素单击onclickEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从两个没有正确使用切换的元素单击onclick
EN