CODEWITHSUNDEEP
jqueryhtmlcss
john
john

Reputation: 109

when a link is clicked how to select and deselect a checkbox

i have the following checkbox,that when its clicked it passes a name as follows

JSFiddle

the checkbox works fine, what i want to achieve is that when the user clicks on the NAME its self the checkbox should get selected and if he clicks it again it should get unselected. I am not sure how to go about this,currently as shown above you can click on the checkbox and it changes to blue when you deselect it,it goes back to the orignal state,how can i achieve this by clicking on the name?

code

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>

your guidance will be highly appreciated

Upvotes: 0

Views: 112

Answers (2)

Nidhi
Nidhi

Reputation: 1443

You can change your <span>NAME</span> to <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>

Upvotes: 1

Tobias
Tobias

Reputation: 248

wrap it with label instead of 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

Upvotes: 1

Related Questions