javascript - 为什么我的复选框在点击后会损坏？

Question

我正在创建一个带有几个复选框的简单表单，但现在每次单击时，按钮都会损坏。看起来它包含在我的脚本中，如果未选中复选框，则分配“否”值，但我似乎无法弄清楚原因。

这是一个工作演示:https://jsfiddle.net/yqwhxek4/6/

我必须包含此脚本，因为我正在将此表单导入到单独的程序中，并且它不允许我使用此解决方案:

<input type="hidden" name="checkbox_1" value="no">
<input type="checkbox" name="checkbox_1" value="yes">

我的脚本中的什么导致它像这样崩溃？

Answer 1

这是因为您在隐藏的复选框元素之后附加了另一个复选框元素。

检查您的 fiddle 更新:https://jsfiddle.net/yqwhxek4/8/

$('[type=checkbox]').click(function() {
  var checkbox = $(this);
  if (checkbox.is(':checked')) {
    checkbox.val('yes');
  } else {
    checkbox.val('no');
  }
});

.col {
  float: none; 
  display: inline-block !important; 
  width: 33%; 
  text-align: center !important;
}

div {
  display: block;
}

/* -------------------------------------
	UNCHECKED CHECKBOXES
   ------------------------------------- */		

label.checkbox {
  border-radius: 20px; 
  border: 1px solid #ffffff; 
  padding-right:10px;
}

/* hide input */
input.checkbox:empty {
  margin-left: -9999px;
  }

input.checkbox:empty ~ label {
  position: relative; 
  float: left; 
  line-height: 1.25em; 
  text-indent: em; 
  margin-top: 1em; 
  cursor: pointer; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  padding-top:15px; 
  padding-bottom: 15px; 
  width: 22px; 
  border:solid 2px #e5e5e5;
  height:2px;
}

input.checkbox:empty ~ label:before {
  position: absolute;  
  display: block; 
  top: 0;  
  bottom: 0;  
  left: 0; 
  content: ''; 
  width: 2em; 
  background: #eeeeee; 
  border-radius: 20px;
}

/* hover */
input.checkbox:hover:not(:checked) ~ label:before {
  content:'\2714'; 
  text-indent: .2em; 
  color: #aaaaaa; 
  padding-top:6px;
}

input.checkbox:hover:not(:checked) ~ label {
  color: #aaaaaa;
}



/* -------------------------------------
	CHECKED CHECKBOXES
   ------------------------------------- */	

input.checkbox:checked ~ label:before {
  content:'\2714'; 
  text-indent: .2em; 
  color: #ffffff; 
  background-color: #34db9a; 
  padding-top:6px;
}

input.checkbox:checked ~ label {
  color: #777;
}

.checkboxItem {
  display:inline-block; 
  vertical-align:top; 
  margin:20px 0px 20px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo">
  <div class="col">
    <div class="moduleimg">
      <img spname="module_07.jpg" alt="" src="http://www.stolenimages.co.uk/components/com_easyblog/themes/wireframe/images/placeholder-image.png" style="max-width: 271px;" width="100%" height="auto" />
    </div>
    <div class="checkboxItem">
      <input name="hero_img" id="hero_img" class="checkbox" value="Yes" autocomplete="off" type="checkbox" />
      <label for="hero_img" class="checkbox"></label>
    </div>
  </div>
  <div class="col">
    <div class="moduleimg">
      <img spname="module_07.jpg" alt="" src="http://www.stolenimages.co.uk/components/com_easyblog/themes/wireframe/images/placeholder-image.png" style="max-width: 271px;" width="100%" height="auto" />
    </div>
    <div class="checkboxItem">
      <input name="check2" id="check2" class="checkbox" value="Yes" autocomplete="off" type="checkbox" />
      <label for="check2" class="checkbox"></label>
    </div>
  </div>
</form>