Clicking a checkbox with protractor?

Question

HTML code

<div class="check-box-panel">
<!--
 ngRepeat: employee in employees 
-->
<div class="ng-scope" ng-repeat="employee in employees">
    <div class="action-checkbox ng-binding">
        <input id="John" type="checkbox" ng-click="toggleSelection(employee.name)" 
                   ng-checked="selection.indexOf(employee.name) > -1" value="John"></input>

    <label for="John">
        ::before
    </label>
<!--
 John               
 end ngRepeat: employee in employees 
-->

<div class="ng-scope" ng-repeat="employee in employees">
<div class="action-checkbox ng-binding">
    <input id="Jessie" type="checkbox" ng-click="toggleSelection(employee.name)" 
               ng-checked="selection.indexOf(employee.name) > -1" value="Jessie"></input>

    <label for="Jessie"></label>

I tried using jQuery

element(by.repeater('employee in employees')).element(by.id('Jessie')).click();

also,I tried using css

element(by.repeater('employee in employees')).$('[value="Jessie"]').click();

But it didn't do the job. Any other way I can click on the particular Checkbox?

Answer 1

Alright I had a very similar issue where I couldn't click the checkbox. It turned out I had to click the checkbox label. However if you want to do any checks on if the checkbox is selected then you have to check the actual checkbox. I ended up making two variables, one for the label and one for the actual checkbox.

JessieChkbxLabel = element(by.css("label[for='Jessie']"));
JohnChkbxLabel   = element(by.css("label[for='John']"));

//Click the Jessie checkbox
JessieChkbxLabel.click();

//Click the John checkbox
JohnChkbxLabel.click();