如果選中，則復選框半徑更改

Question

這是我的css

.round {
  position: relative;
}

.round input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

我在 css 中更改了邊框半徑，但不知道如何在 js 中進行更改。 有人可以幫我 :) 我是 javascript 新手，所以請不要評判我，但我嘗試過

var checkbox=document.getElementById('checkbox');
if (checkbox.checked){checkbox.style.borderRadius="10%";
}

HTML

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="index.css"> </head> <body>     <div class="container">         <div class="round">           <input type="checkbox" id="checkbox"/>          </div>       </div>       <script src="index.js"></script> </body> </html>

Answer 1

我認為這樣做的正確位置是 css：

.round input[type="checkbox"]:checked + label:after {
  border-radius: 10%
}

您的 JS 方法幾乎沒有問題，首先，您需要添加一個事件偵聽器來檢測更改：

checkbox.addEventListener('change', (e) => {
  if (e.target.checked) {
    // add a class or specific styles here
  } else {
    // remove prev updates
  }
});

2，您正在嘗試將 borderRadius 添加到復選框，並且您無法真正設置復選框的樣式。 顯然，在您的情況下， label:after 負責復選框樣式。 同樣，CSS 解決方案會更簡潔

如果選中，則復選框半徑更改

問題描述

1 個解決方案

解決方案1
0 2020-09-02 15:07:37

如果選中，則復選框半徑更改

問題描述

1 個解決方案

解決方案1 0 2020-09-02 15:07:37

解決方案1
0 2020-09-02 15:07:37