How to check a set of checkboxes on the change of select option using jQuery 2.1.4

Question

I am trying to code so that upon selection of select box values, other values will be selected. For example, if I select Monthly then all months would get selected. If i select Quarterly then only April, Aug and more would get selected. If i select Halfyearly only May and Dec would get selected.

So, is there any way i might do that to get the above output using jQuery 2.1.4?

I would like to thank in advance....

The following code is not working, but all of the if and else conditions are working correctly.

function smonth() {
    var fre=$('#frequency').val();
    if (fre=="monthly") {
        alert("monthly");
    } else {
        if(fre=="quaterly") {
            alert("quaterly");
        }
    }

    if (fre=="halfyearly") {
        alert("halfyearly");
    } else {
        if(fre=="yearly") {
            alert("yearly");
        }
    }
}

Answer 1

First, provide yours html .

Second, you can do it by smth. like this:

function selectMonths(mark) {
    $('.month').each(function () {
        var checkbox = $(this);
        var level = parseInt(checkbox.data("level"));
        if (level >= mark)
            checkbox.check();
    }
}

$("select.level").changed(function () {
    var selectedLevel = $(this).val();
    selectMonths(selectedLevel);
});

And yours html must be like:

...
<input type="checkbox" name="..." data-level="2" />May
<input type="checkbox" name="..." data-level="1" />June
...

The logic:

1. Each of time type must have a level of frequency: monthly - 1, quarterly - 2, halfyearly - 3, yearly - 4
2. Each of month must have corresponding level: december - 4 (yearly), april - 2 (quarterly), all triggered only monthly - 1
3. When you select frequency type - you also put checks on checkboxes with corresponding data-level attribute

Answer 2

In the absence of the html, you can explicitly set the check boxes like this -

  $('#myselect').change(function(){
     $('.item :checkbox').removeAttr('checked'); //uncheck all the boxes
        switch($( "#myselect option:selected" ).text()) {
            case 'monthly':
                $('.item :checkbox').checked = true;//check all
                break;
            case 'quarterly':
                $('#mycheckboxApr').checked = true;
                $('#mycheckboxAug').checked = true;
                // etc...for the rest of the quarterly checkboxes
                break;
            case 'halfyearly':
                $('#mycheckboxMay').checked = true;
                $('#mycheckboxDec').checked = true;
                break;
        }
  })

If you add classes to the checkboxes corresponding to each interval then you can set all that apply in single lines -

html -

<input id="mycheckboxDec" type="checkbox" class = "monthly quarterly" />

jquery -

$('.monthly').checked = true; 

Answer 3

Thanks guys i got it and its working perfectly for jquery 2.1.4 i have used combinations of answers the solution code.

var abc=$("#frequency").val(); switch(abc) { case 'monthly': $('input:checkbox').prop('checked',false); $('input:checkbox').prop('checked',true); break;

    case 'quaterly':
    $('input:checkbox').prop('checked',false);
    $('#mycheckboxapr').prop('checked',true);
    $('#mycheckboxaug').prop('checked',true);
    $('#mycheckboxdec').prop('checked',true);
    break;

    case 'halfyearly':
    $('input:checkbox').prop('checked',false);
    $('#mycheckboxjune').prop('checked',true);
    $('#mycheckboxdec').prop('checked',true);
    break;

    case 'yearly':
    $('input:checkbox').prop('checked',false);
    $('#mycheckboxapr').prop('checked',true);
    break;

}

}

it worked properly.