jquery - 单击链接时如何选择和取消选择复选框

Question

我有以下复选框，当它被点击时，它会传递一个名称，如下所示

JSFiddle

复选框工作正常，我想要实现的是，当用户点击 NAME 时，复选框应该被选中，如果他再次点击它，它应该被取消选中。 我不确定该怎么做，目前如上所示，您可以单击复选框，当您取消选择它时它会变为蓝色，它会返回到原始状态，我如何通过单击名称来实现此目的？

代码

var c = $('<span><a class="internal_link" data-destination="' + this.Destination + '" data-id="' + this.Id + '"><span><input type="checkbox" class="multiselect-markets hidden" id="cb' + this.Id + '"><label for="cb' + this.Id + '" class="checkmark"></label></span></a></span>');
$.each(this.Markets, function() {

  b = $('<li  style="padding-left:28px"> <span style="color:#5a5959;">' + this.MarketName + '</span></li> ');
  b.append(c);
  list.append(b);
});

function test() {
  if ($(this.MarketName).click) {
    // im not sure in here how to tell it if the Name is clicked it should activate the checkbox and if its un clicked it should deselect the checkbox
  }
}

.checkmark {
  display: inline-block;
  width: 22px;
  /*height: 22px;*/
  height: 17px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  margin-left: 10%;
  margin-bottom: 1px;
}

.checkmark:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>NAME</span>
<span><a class="internal_market_link" data-destination="' + this.Destination + '" data-id="' + this.Id + '"><span><input type="checkbox" class="multiselect-markets" style="display:none;" id="cb' + this.Id + '"><label for="cb' + this.Id + '" class="checkmark"></label></span></a>
</span>

非常感谢您的指导

Answer 1

您可以更改您的 <span>NAME</span>至 <label for="cb' + this.Id + '">NAME</label>

.checkmark {
    display: inline-block;
    width: 22px;
    /*height: 22px;*/
    height:17px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin-left:10%;
    margin-bottom:1px;
}
.checkmark:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ccc;
    left: 11px;
    top: 6px;
}

.checkmark {
    cursor: pointer;
}

 .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
    background-color: blue;
}

<label for="cb' + this.Id + '">NAME</label>
<span><a class="internal_market_link" data-destination="' + this.Destination + '" data-id="' + this.Id + '"><span><input type="checkbox" class="multiselect-markets" style="display:none;" id="cb' + this.Id + '"><label for="cb' + this.Id + '" class="checkmark"></label></span></a></span>