Question

我正在创建一个自定义表单，但遇到了障碍：单选按钮;当您在未选中状态下单击它们时，请不要检查。他们将检查是否单击相关的Div，并且在选中时也将取消选中。我试图将JS扩展到Label，它仍然无法正常工作。所以...

如何获取自定义单选按钮以进行检查和/或我需要做些什么才能使其正常运行？

以下是相关代码：

＆＃13;

 function check(checkbox) {
   if (document.getElementById(checkbox).checked == false) {
     document.getElementById(checkbox).checked = true;
   } else {
     document.getElementById(checkbox).checked = false;
   }
 }

＆＃13;

 .title {
   display: inline;
   position: relative;
   top: 2px;
   font-family: "Arial";
   color: #fff;
   font-size: 18px;
   padding: 0px;
   margin: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   border-collapse: collapse;
   font-stretch: ultra-condensed;
 }
 input[type="radio"] {
   display: none;
 }
 [type="radio"] + label {
   width: 10px;
   height: 10px;
 }
 [type="radio"] + label {
   background-color: #A3D5FF;
   border: 1px solid #A3D5FF;
   padding: 9px;
   border-radius: 20px;
   display: inline-block;
   position: relative;
   margin-right: 30px;
 }
 [type="radio"]:checked + label {
   background-color: #0088A8;
   ;
   border: 3px solid #fff;
   height: 5.75px;
   width: 5.75px;
   color: #243441;
 }
 input[type="radio"] + label {
   cursor: pointer;
   font-size: 1em;
   float: right;
   position: relative;
   right: -27px;
 }
 .chk {
   background: #009FC2;
   width: 265px;
   height: 30px;
   margin: 5px;
   padding: 5px;
   border-radius: 5px;
 }
 .chk:hover {
   background: #0088A8;
 }
HTML

＆＃13;

<div class="chk" onClick="check('f-unlimited')">
  <h3 class="title">
                Unlimited  
              </h3>
  <input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
  <label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
  <h3 class="title">
                Expanded Format  
              </h3>
  <input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
  <label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
  <h3 class="title">
                Standard Legal  
              </h3>
  <input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
  <label for="f-standardLegal"></label>
</div>
</div>

＆＃13;

附加说明：我为我的复选框运行几乎完全相同的代码，但它们运行正常。

Answer 1

问题出在您的check功能中。单击div时，它会触发以反转检查状态。单击检查本身时，检查状态将反转，然后check函数运行并再次反转状态。单击检查本身时，您需要取消事件传播。

Answer 2

注意到，之前的回答是jquery，请参阅下面的vanilla

javascript：

function checkboxClicked() {
    event.stopPropagation();
    event.preventDefault();
}
function check(checkbox) { 
    if (document.getElementById(checkbox).checked == false) {
      document.getElementById(checkbox).checked = true;
    } else {
      document.getElementById(checkbox).checked = false;
    } 
  }

html：

    <div class="chk" onClick="check('f-unlimited')">
      <h3 class="title">
                    Unlimited  
                  </h3>
      <input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
      <label for="f-unlimited"></label>
    </div>

    <div class="chk" onClick="check('f-expandedFormat')">
      <h3 class="title">
                    Expanded Format  
                  </h3>
      <input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
      <label for="f-expandedFormat"></label>
    </div>

    <div class="chk" onClick="check('f-standardLegal')">
      <h3 class="title">
                    Standard Legal  
                  </h3>
      <input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
      <label for="f-standardLegal"></label>
    </div>

如何获取自定义单选按钮进行检查？

2 个答案: