Question

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

复选框工作正常，我想要实现的是当用户单击NAME时，复选框应该被选中，如果再次点击它，它应该被取消选中。我不知道如何解决这个问题，目前如上图所示，您可以点击复选框，当您取消选中它时会变为蓝色，它会回到原始状态，如何通过点击名称来实现此目的？ / p>

码

＆＃13;

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
  }
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

您的指导将受到高度赞赏

Answer 1

用标签而不是span

包裹它

 <label>NAME
 <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>
 </label>

fiddle

Answer 2

您可以将<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>

单击链接时，如何选择和取消选中复选框

2 个答案: