Question

我正在创建一个带有几个复选框的简单表单，但现在每次单击时，按钮都会中断。它看起来像是包含在我的脚本中，以指定一个值为“不”的值。如果未选中复选框，但我似乎无法找出原因。

这是一个有效的演示：https://jsfiddle.net/yqwhxek4/6/

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

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

我的脚本中有什么导致它像那样破坏？

Answer 1

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

检查您的小提琴的更新：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>

Answer 2

克隆和.after().append(的小提琴对我来说并没有意义，因为你拥有它。 ~~也许你简单的意思是检查。发送复选框并操纵属性＆＃34;值＆＃34;？（注意，复选框通常没有＆＃34;值＆＃34;但只是选中/取消选中（布尔值）。~~

~~建议的代码更改:(我仍然不喜欢＆＃34;＃foo＆＃34;上的点击处理程序;但现在让我们绕过它。）~~

$('#foo').on('click', '.checkboxItem', function() {
  var currCbox = $(this).find('input[type="checkbox"]');
  currCbox.attr('value', currCbox[0].checked ? 'yes' : 'no');
});

标记我测试过:(没有重复的ID并更改了标签）

<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_img0" id="hero_img0" class="checkbox" value="Yes"  autocomplete="off" type="checkbox" />
      <label for="hero_img0" 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="hero_img" id="hero_img" class="checkbox" value="Yes" autocomplete="off" type="checkbox" />
      <label for="hero_img" class="checkbox"></label>
    </div>
  </div>
</form>

可测试的小提琴：https://jsfiddle.net/MarkSchultheiss/ydngkoxk/

为什么我的复选框在点击后会中断？

2 个答案: