CODEWITHSUNDEEP
javascriptjqueryinputcheckbox
john
john

Reputation: 1273

how to check checkboxed with jQuery based on the values of a string

I have a string with values and i want to check the checkboxes which have these values in the string:

var daysofweek = '1,3,4,';

<input class="edit-day" type="checkbox" value="1"><label class="form-check-label">Monday</label>
<input class="edit-day" type="checkbox" value="2"><label class="form-check-label">Tuesday</label>
<input class="edit-day" type="checkbox" value="3"><label class="form-check-label">Wednesday</label>
<input class="edit-day" type="checkbox" value="4"><label class="form-check-label">Thursday</label>
<input class="edit-day" type="checkbox" value="5"><label class="form-check-label">Friday</label>
<input class="edit-day" type="checkbox" value="6"><label class="form-check-label">Saturday</label>
<input class="edit-day" type="checkbox" value="0"><label class="form-check-label">Sunday</label> // sunday has 0

In this case, Monday, Wednesday and Thursday should be checked

How can i do that?

I tried something with code below but that does not work:

$.each(daysofweek, function(i, val){
    $('.edit-day').prop('checked', true);
});

Upvotes: 0

Views: 37

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You either have to split the string, or convert it to an array like the example below:

var daysofweek = [1, 3, 4, ];

$.each(daysofweek, function(i, val) {
  $('.edit-day[value=' + val + ']').prop('checked', true);
});

If daysofweek have to be a string then use daysofweek.split(',')

Demo

var daysofweek = [1, 3, 4, ];

$.each(daysofweek, function(i, val) {
  $('.edit-day[value=' + val + ']').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="edit-day" type="checkbox" value="1"><label class="form-check-label">Monday</label>
<input class="edit-day" type="checkbox" value="2"><label class="form-check-label">Tuesday</label>
<input class="edit-day" type="checkbox" value="3"><label class="form-check-label">Wednesday</label>
<input class="edit-day" type="checkbox" value="4"><label class="form-check-label">Thursday</label>
<input class="edit-day" type="checkbox" value="5"><label class="form-check-label">Friday</label>
<input class="edit-day" type="checkbox" value="6"><label class="form-check-label">Saturday</label>
<input class="edit-day" type="checkbox" value="0"><label class="form-check-label">Sunday</label>

Other example

var daysofweek = [1, 3, 4, ];

$('.edit-day').prop('checked', function() {
  return $.inArray(+$(this).val(), daysofweek) != -1
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="edit-day" type="checkbox" value="1"><label class="form-check-label">Monday</label>
<input class="edit-day" type="checkbox" value="2"><label class="form-check-label">Tuesday</label>
<input class="edit-day" type="checkbox" value="3"><label class="form-check-label">Wednesday</label>
<input class="edit-day" type="checkbox" value="4"><label class="form-check-label">Thursday</label>
<input class="edit-day" type="checkbox" value="5"><label class="form-check-label">Friday</label>
<input class="edit-day" type="checkbox" value="6"><label class="form-check-label">Saturday</label>
<input class="edit-day" type="checkbox" value="0"><label class="form-check-label">Sunday</label>

Upvotes: 2

Related Questions