How to check checkboxes using jquery on page load

Question

My problem is that I want to check my checkboxes on page load.

These checkboxes are currently at the end of a user form, as shown below :

Each checkbox correspond to a Specification object. In my modelmap, I add a "specification" list containing the checked values, plus an "allspecification" list containing all the values :

List<Specification> specification=hot*******.get********otel(createHotel); //this is for check value.

List<Specification> allspecification=city****vice.getspec***fication(); //for all specification

map.addAttribute("orgspecification", specification);
map.addAttribute("allToatalspecfication", allspecification);

Here is the corresponding JSP page :

<div id="orgspecifications" style="margin-left:1px; height: 100px; width: 97%;">
  <c:forEach step="1" items="${allToatalspecfication}" var="specification">
    <div align="left" id="${specification.id}" style="width: 28%; color: #507B07; border: solid 1px gray; float: left; margin: 3px; height: 27px; background-color: #E9EBE3;">
      <input type="checkbox" name="checkbox" value="${specification.id}" id="checkbox" class="selectall"/>
      ${specification.name}
    </div>
  </c:forEach>
</div>

The thing is, I am showing all the "allspecification" list, but I also want the elements of the "specification" list to be checked. How can achieve this on page load ?

Thanks in advance.

Answer 1

$(function(){
  $.get('some/url',function(data){
    $('.selectall').each(function(){
      if ($.inArray(+$(this).val(),data) > -1){
        $(this).attr('checked',true);
      }
    });
  });
})

Note, I assume data variable contains checked specifications' ids of Number type.

On server-side you'll have to have something like this:

@Controller
public class A {

  @RequestMapping('some/url')
  @ResponseBody
  public List<Integer> getIdsOfCheckedSpecs() {
    List<Integer> list = ...
    return list;
  }
}

Answer 2

by doin this i slove the issue...

<div style="margin-top: 6px;">
                <div id="orgspecifications" style="margin-left:1px; height: 100px; width: 97%;">
<c:forEach step="1" items="${allToatalspecfication}"   var="specification">
                 <c:set value="${true}" var="unCheckFlag"></c:set>

                    <c:forEach  items="${orgspecification}" var="selectedspecification">

                                <c:if test="${specification.id eq selectedspecification.id}">
                                        <div align="left" id="${specification.id}" style="width: 28%; color: #507B07; border: solid 1px gray; float: left; margin: 3px; height: 27px; background-color: #E9EBE3;">
                                            <input type="checkbox" name="checkbox" value="${specification.id}" id="checkbox" class="selectall" checked="checked"/>
                                                ${specification.name}
                                        </div>
                                         <c:set value="${false}" var="unCheckFlag"></c:set>
                                </c:if>
                    </c:forEach>
                    <c:if test="${unCheckFlag == true}">

                                    <div align="left" id="${specification.id}" style="width: 28%; color: #507B07; border: solid 1px gray; float: left; margin: 3px; height: 27px; background-color: #E9EBE3;">
                                            <input type="checkbox" name="checkbox" value="${specification.id}" id="checkbox" class="selectall"/>
                                                ${specification.name}
                                    </div>
                   </c:if>      





</c:forEach>
</div>

Thanks to all for reply.