单击 div 中的单选按钮时如何更改 div 的边框颜色？

Question

所以我目前正在做一个个人项目。遇到了一个问题。

当用户单击 div 中的单选按钮时，我希望此 div 的边框颜色为绿色。像这样： Here

但我当前的版本是这样的： Here

这是我的 CSS 和 HTML

    .backProjectCard2 {
     padding-right: 10px;
 }
 
 .backProjectCard {
     border: 2px solid #ececec;
     border-radius: 10px;
     margin: 0 0 20px;
     padding-top: 24px;
     position: relative;
     right: 5px;
     width: 580px;
 }
 /*For Input and .checkmark*/
 
 .backProjectCard input {
     position: relative;
     height: 20px;
     width: 20px;
     left: 20px;
 }
 
 .input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
 }
 
 .backProject input:checked~.checkmark {
     background-color: #fff;
 }
 
 .checkmark {
     position: absolute;
     top: 27px;
     left: 20px;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border-radius: 50%;
     border: solid #e0e0e0 1.7px;
     z-index: -1;
 }
 
 .backProject input:checked~.checkmark:after {
     display: block;
 }
 
 .backProject .checkmark:after {
     top: 2px;
     left: 3px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: hsl(176, 50%, 47%);
 }
 
 .checkmark:after {
     z-index: 1;
     content: "";
     position: absolute;
     display: none;
 }

<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge  or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
    <p>Enter your pledge</p>
    <button class="btn-1 card2Btn">Continue</button>
    <button class="btn-2">
        <p>$</p>
        <input value="25" class="input-price input-price2" type="number">
    </button>
</div>

JS（仅点击两次单选按钮）：

function radioCheck() {
    timesClicked++
    if (timesClicked > 1) {
        $("input").prop("checked", false)
        timesClicked = 0;
    }
}

Answer 1

你可以这样做

function radioCheck(){
    // Get the checkbox
  var checkBox = document.getElementById("myInputCheck");
   // Get the div with border
  var divBorder = document.getElementsByClassName("backProjectCard")[0]
  // If the checkbox is checked, display the border
  if (checkBox.checked == true){
   divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
   divBorder.classList.add("newBorder"); //add the new border with new color
  } else {
    divBorder.classList.remove("newBorder");
    divBorder.classList.add("backProjectCard");
  }
}

   .backProjectCard2 {
     padding-right: 10px;
 }
 
 .backProjectCard {
     border: 2px solid #ececec;
     border-radius: 10px;
     margin: 0 0 20px;
     padding-top: 24px;
     position: relative;
     right: 5px;
     width: 580px;
 }
 /*For Input and .checkmark*/
 
 .backProjectCard input {
     position: relative;
     height: 20px;
     width: 20px;
     left: 20px;
 }
 
 .input {
     position: absolute;
     opacity: 1;
     cursor: pointer;
 } 
 .checkmark {
     position: absolute;
     top: 27px;
     left: 20px;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border-radius: 50%;
     border: solid #e0e0e0 1.7px;
     z-index: -1;
 }
.newBorder{
  border: 2px solid #177972 !important;
     border-radius: 10px;
     margin: 0 0 20px;
     padding-top: 24px;
     position: relative;
     right: 5px;
     width: 580px;
}

<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge  or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

Answer 2

function colorchange() {
  var x = document.getElementById('checker');
  var y = document.getElementById('radiobox');
  if (x.checked === true) {
    y.style.borderColor = "green";
  } else {
    y.style.borderColor = "silver";
  }
}

#radiobox {
  width: 300px;
  height: 200px;
  border: 5px solid;
  border-color: silver;
}

<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>

为简单起见，我只使用一个简短的示例，您可以将其应用到您自己的示例中。

单击 div 中的单选按钮时如何更改 div 的边框颜色？

How to change the border color of a div when clicking a radio button inside the same div?

html

javascript

css

jquery

border