Checkboxen basierend auf Dropdown prüfen AUSGABE

Question

Also habe ich diesen Code, um bestimmte Checkboxen basierend auf dem ausgewählten Wert eines Dropdowns zu überprüfen. Problem ist, sie heben sich fast gegenseitig auf. Wenn ich nur eins hineinsetze, funktioniert es gut. Selbst wenn ich zwei drin stecke funktioniert das gut. Wenn ich jedoch alle 7 Javascript-Elemente setze, fängt es an, sich merkwürdig zu verhalten und wenn ich einige Dropdown-Werte auswähle, wird nichts überprüft .. oder nur einige werden überprüft .. Es ist wirklich komisch.

Unten ist der Code.

Selector-Code:

<select class='form-control' id='department' name='department' placeholder='Department'> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
    <option value='3'>3</option> 
    <option value='4'>4</option> 
    <option value='5'>5</option> 
    <option value='6'>6</option> 
    <option value='7'>7</option> 
</select> 

Kurz Beispiel des Kontrollkästchen. Ich habe 36 von ihnen, nur Posten 1-8, also mache ich diesen Beitrag nicht riesig.

<div class='form-group'> 
    <label class='control-label col-md-2 col-md-offset-2' for='id_comments'>Inccident</label> 
    <div class='col-md-6'> 

     <label for="ck1">Test</label> 
     <input type="checkbox" name="ck1" id="ck1"> 

     <label for="ck2">Test</label> 
     <input type="checkbox" name="ck2" id="ck2"> 

     <label for="ck3">Test</label> 
     <input type="checkbox" name="ck3" id="ck3"> 

     <label for="ck4">Test</label> 
     <input type="checkbox" name="ck4" id="ck4"> 

     <label for="ck5">Test</label> 
     <input type="checkbox" name="ck5" id="ck5"> 

     <label for="ck6">Test</label> 
     <input type="checkbox" name="ck6" id="ck6"> 

     <label for="ck7">Test</label> 
     <input type="checkbox" name="ck7" id="ck7"> 

     <label for="ck8">Test</label> 
     <input type="checkbox" name="ck8" id="ck8"> 

    </div> 
</div> 

Schließlich die JavaScript-Codes.

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck15, #ck18, #ck16, #ck20, #ck1, #ck8, #ck6, #ck5, #ck21, #ck22').prop('checked', text === '1'); 
    }); 
</script> 


<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck12, #ck16, #ck17, #ck18, #ck2, #ck4, #ck7, #ck23, #ck25, #ck33, #ck35, #ck36, #ck20').prop('checked', text === '2'); 
    }); 
</script> 

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck12, #ck20, #ck23, #ck25, #ck26, #ck27, #ck28, #ck35, #ck36').prop('checked', text === '3'); 
    }); 
</script> 

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck1, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck18, #ck20').prop('checked', text === '4'); 
    }); 
</script> 

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck20, #ck21, #ck22, #ck23, #ck34').prop('checked', text === '5'); 
    }); 
</script> 

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck13, #ck21, #ck20, #ck22, #ck23, #ck29, #ck30, #ck31, #ck32').prop('checked', text === '6'); 
    }); 
</script> 

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck20, #ck21, #ck22, #ck23, #ck24, #ck25, #ck34').prop('checked', text === '7'); 
    }); 
</script> 

Ich weiß, ich kann sie alle in einem Skript-Tag setzen. Es hat NICHT funktioniert, als ich das ursprünglich gemacht habe, also habe ich sie alle so gestellt, um zu sehen, ob es funktioniert. Immer noch funky.

UPDATE

<script type="text/javascript"> 

    $("#department").change(function() { 
     var text = $('#department :selected').text(); 
     $('#ck9, #ck10, #ck11, #ck15, #ck18, #ck16, #ck20, #ck1, #ck8, #ck6, #ck5, #ck21, #ck22').prop('checked', text === '1'); 

     $('#ck9, #ck10, #ck11, #ck12, #ck16, #ck17, #ck18, #ck2, #ck4, #ck7, #ck23, #ck25, #ck33, #ck35, #ck36, #ck20').prop('checked', text === '2'); 

     $('#ck9, #ck10, #ck11, #ck12, #ck20, #ck23, #ck25, #ck26, #ck27, #ck28, #ck35, #ck36').prop('checked', text === '3'); 

     $('#ck9, #ck10, #ck11, #ck1, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck18, #ck20').prop('checked', text === '4'); 

     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck20, #ck21, #ck22, #ck23, #ck34').prop('checked', text === '5'); 

     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck13, #ck21, #ck20, #ck22, #ck23, #ck29, #ck30, #ck31, #ck32').prop('checked', text === '6'); 

     $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck20, #ck21, #ck22, #ck23, #ck24, #ck25, #ck34').prop('checked', text === '7'); 
}); 

</script> 

Hat es wie diese als gut, gleiches Problem.

Answer 1

Danke auch RayonDabre und mein eigenes Gehirn. Ich habe es gelöst.

Hier ist die Jquery, die es richtig funktioniert.

$('#department').change(function() { 
var select = $('#department :selected'); 
var id = select.attr('id'); 

if(select.val() == '1') { 
     $('[type="checkbox"]').prop('checked', false); 


    $('#ck9, #ck10, #ck11, #ck15, #ck18, #ck16, #ck20, #ck1, #ck8, #ck6, #ck5, #ck21, #ck22').prop('checked', true); 
} 

else if(select.val() == '2') 
{ 
    $('[type="checkbox"]').prop('checked', false); 

    $('#ck9, #ck10, #ck11, #ck12, #ck16, #ck17, #ck18, #ck2, #ck4, #ck7, #ck23, #ck25, #ck33, #ck35, #ck36, #ck20').prop('checked', true); 
} 
else if(select.val() == '3') 
{ 
    $('[type="checkbox"]').prop('checked', false); 
    $('#ck9, #ck10, #ck11, #ck12, #ck20, #ck23, #ck25, #ck26, #ck27, #ck28, #ck35, #ck36').prop('checked', true); 
} 
else if(select.val() == '4') 
{ 
$('[type="checkbox"]').prop('checked', false); 
    $('#ck9, #ck10, #ck11, #ck1, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck18, #ck20').prop('checked', true); 
} 
else if(select.val() == '5') 
{ 
    $('[type="checkbox"]').prop('checked', false); 
    $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck12, #ck13, #ck15, #ck16, #ck20, #ck21, #ck22, #ck23, #ck34').prop('checked', true); 
} 
else if(select.val() == '6') 
{ 
    $('[type="checkbox"]').prop('checked', false); 
    $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck13, #ck21, #ck20, #ck22, #ck23, #ck29, #ck30, #ck31, #ck32').prop('checked', true); 
} 
else if(select.val() == '7') 
{ 
    $('[type="checkbox"]').prop('checked', false); 
    $('#ck9, #ck10, #ck11, #ck3, #ck5, #ck6, #ck8, #ck20, #ck21, #ck22, #ck23, #ck24, #ck25, #ck34').prop('checked', true); 
} 

});