Question

我想在检查后将Checkbox从黑色更改为红色但无法获得结果。请检查代码

HTML

 .wpcf7-checkbox, .radio {
      display: block;
      margin: 10px 0 0;
    }
    .wpcf7-checkbox .wpcf7-list-item, .radio .wpcf7-list-item {
      display: block;
    }
    .wpcf7-checkbox .wpcf7-list-item input[type=checkbox], .wpcf7-checkbox .wpcf7-list-item input[type=radio], .radio .wpcf7-list-item input[type=checkbox], .radio .wpcf7-list-item input[type=radio] {
      display: none;
    }
    .wpcf7-checkbox .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .wpcf7-checkbox .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before {
      background: #ffffff;
      border: 1px solid red;
      border-radius: 3px;
      content: "";
      height: 15px;
      left: -22px;
      position: absolute;
      width: 15px;
    }
    .wpcf7-checkbox .wpcf7-list-item-label, .radio .wpcf7-list-item-label {
      display: inline-block;
      font-family: "Arial", sans-serif;
      font-size: 14px;
      font-weight: normal;
      left: 15px;
      line-height: 14px;
      margin: 0 0 15px;
      position: relative;
    }
    .wpcf7-checkbox .wpcf7-list-item-label::before, .radio .wpcf7-list-item-label::before {
      background: #ffffff;
      border: 1px solid #000000;
      border-radius: 3px;
      content: "";
      height: 15px;
      left: -22px;
      position: absolute;
      width: 15px;
    }
    .wpcf7-checkbox .wpcf7-list-item-label:hover, .radio .wpcf7-list-item-label:hover {
      cursor: pointer;
    }

 <span class="wpcf7-form-control-wrap checkbox-191">
      <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first">
          <input type="checkbox" name="checkbox-191[]" value="1000" />
          <span class="wpcf7-list-item-label">1000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="2000" />
          <span class="wpcf7-list-item-label">2000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="3000" />
          <span class="wpcf7-list-item-label">3000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="4000" />
          <span class="wpcf7-list-item-label">4000</span>
        </span>
        <span class="wpcf7-list-item last">
          <input type="checkbox" name="checkbox-191[]" value="5000" />
          <span class="wpcf7-list-item-label">5000</span>
        </span>
      </span>
    </span>

如果你能指出我的错误或者我错过了某些东西，那将会非常有帮助。

Demo

Answer 1

<强>已更新

由于您无法控制生成的HTML，因此可以使用javascript / jQuery

执行此操作

jQuery：jsFiddle 1 ^已更新

jQuery('.wpcf7-list-item-label').on('click', function() {
  var corrChkbx = jQuery(this).prev('input[type="checkbox"]'),
    checkedVal = corrChkbx.prop('checked');

  corrChkbx.prop('checked', !checkedVal);
})

纯JavaScript：jsFiddle 2

var labelSpans = document.getElementsByClassName('wpcf7-list-item-label');

for (var i = 0, ln = labelSpans.length; i < ln; i++) {
  addEv(labelSpans[i]);
}

function addEv($th) {
  $th.addEventListener('click', function() {
    var corrChkbx = $th.parentNode.querySelector('input[type="checkbox"]');
    corrChkbx.checked = !corrChkbx.checked;
  });
}

Answer 2

有两种方法可以解决这个问题。

如果你可以编辑html，你只需要在<label>中包装dom。检查第一个输入＆＃34; 1000＆＃34;在下面的小提琴。
如果你不能编辑html，我已经编写了JS代码，以便在下面的小提琴中实现它。

小提琴： https://jsfiddle.net/a2k73v0y/2/

HTML：

    <span class="wpcf7-form-control-wrap checkbox-191">
  <span class="wpcf7-form-control wpcf7-checkbox">
    <label for="checkbox-191[]"><span class="wpcf7-list-item first">
      <input type="checkbox" name="checkbox-191[]" id="checkbox-191[]" value="1000" />
      <span class="wpcf7-list-item-label">1000</span>
    </span>
    </label>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="2000" />
      <span class="wpcf7-list-item-label">2000</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="3000" />
      <span class="wpcf7-list-item-label">3000</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="4000" />
      <span class="wpcf7-list-item-label">4000</span>
    </span>
    <span class="wpcf7-list-item last">
      <input type="checkbox" name="checkbox-191[]" value="5000" />
      <span class="wpcf7-list-item-label">5000</span>
    </span>
  </span>
</span>

JS：

    $(function(){
    $(".wpcf7-list-item").click(function(){
    if($(this).find("input").attr("checked")){
        $(this).find("input").attr("checked",false);
    }else{
        $(this).find("input").attr("checked",true);
    }

  });
});

Answer 3

请尝试添加此css

.wpcf7-checkbox .wpcf7-list-item input[type=checkbox], .wpcf7-checkbox .wpcf7-list-item input[type=radio], .radio .wpcf7-list-item input[type=checkbox], .radio .wpcf7-list-item input[type=radio] {
    /* display: none; */
    position: absolute;
    z-index: 123;
    left: -1px;
    opacity: 0;
}

自定义复选框无法在联系表单7中工作

3 个答案: