Does check boxes has to have a unique id?

Hi all.. When I try to click a single checkbox, others also get selected automatically.

public function edit($id)
    {
        $classes = Grade::with('subjects')->get();
        return view('profiles.edit', compact('classes'));  
    }

This is the collection I get when I dd($classes)

array:3 [▼
  0 => array:7 [▼
    "id" => 1
    "name" => "Grade 8"
    "slug" => "grade-8"
    "description" => "This is Grade Eight"
    "created_at" => "2020-10-31T17:35:41.000000Z"
    "updated_at" => "2020-10-31T17:35:41.000000Z"
    "subjects" => array:1 [▼
      0 => array:7 [▼
        "id" => 1
        "name" => "Mathematics"
        "slug" => "matematics"
        "description" => "This is Mathematics"
        "created_at" => "2020-10-31T17:34:29.000000Z"
        "updated_at" => "2020-11-02T20:58:31.000000Z"
        "pivot" => array:2 [▶]
      ]
    ]
  ]
  1 => array:7 [▶]
  2 => array:7 [▶]
]

How do I give each checkbox a unique id?...

 @foreach($classes as $class)
                    <div class="card shadow mx-2 my-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"  id="{{$class->id}}" name="classes[]" value="" />
                                    <label class="form-check-label" for="{{$class->id}}">
                                        {{$class->name}}
                                    </label>
                                </div>
                            </h6>
                        </div>
                        <div class="card-body">
                        @foreach($class->subjects as $subject)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"  id="{{$subject->id}}" name="subjects[]" value="" />
                                <label class="form-check-label" for="{{$subject->id}}">
                                    {{$subject->name}}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach

laracoft

5 years ago

Level 27

@vusumzi

try this

@foreach($classes as $class)
    <div class="card shadow mx-2 my-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox"  id="class-{{$class->id}}" name="classes[]" value="" />
                    <label class="form-check-label" for="{{$class->id}}">
                        {{$class->name}}
                    </label>
                </div>
            </h6>
        </div>
        <div class="card-body">
        @foreach($class->subjects as $subject)
            <div class="form-check">
                <input class="form-check-input" type="checkbox"  id="subject-{{$subject->id}}" name="subjects[]" value="" />
                <label class="form-check-label" for="{{$subject->id}}">
                    {{$subject->name}}
                </label>
            </div>
            @endforeach
        </div>
    </div>
@endforeach

1 like

rodrigo.pedra

5 years ago

Level 56

Yes, actually and id attribute should not be repeated within the same HTML document.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

The id global attribute defines an identifier (ID) which must be unique in the whole document.

Browsers don't enforce it, but you can have problems with CSS and JavaScript when using repeating ids.

As you have two nested for loops, and uses only the class and subject's id values as the id attribute you end with a lot of repeating ids.

Every label clicked will trigger an input with and id attribute matching its for attribute.

Try doing this:

@foreach($classes as $class)
    <div class="card shadow mx-2 my-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" 
                           id="class_{{$class->id}}" name="classes[]" value="" />
                    <label class="form-check-label" 
                           for="class_{{$class->id}}">
                        {{$class->name}}
                    </label>
                </div>
            </h6>
        </div>
        <div class="card-body">
            @foreach($class->subjects as $subject)
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" 
                           id="subject_{{$subject->id}}" name="subjects[]" value="" />
                    <label class="form-check-label" 
                           for="subject_{{$subject->id}}">
                        {{$subject->name}}
                    </label>
                </div>
            @endforeach
        </div>
    </div>
@endforeach

Note I changed both classes and subjects' id attributes and associated labels' for attribute.

Don't worry, the id attribute value is not sent to the server when submitting the form. When submitting what counts is the name attribute.

But id are very important to associate with label elements, and for accessibility and keyboard navigation concerns.

Note I am assuming the relation between a class and a subject is a has-many/belongs-to and not a belongs-to-many.

If that is the case you need to incorporate the class id value to the subject input's id attribute to differentiate subjects repeating for different classes.

1 like

Please or to participate in this conversation.