ドロップダウンに基づくチェックボックスのチェックISSUE

Question

このコードでは、ドロップダウンの選択値に基づいて特定のチェックボックスをチェックしています。問題は、彼らはお互いをほぼキャンセルしていることです。私はそこに1つだけ置く場合、それはうまく動作します。私はそれを2つ入れてもうまく動作します。しかし、私は7つのjavascriptの項目をすべて置くと、それは変な動作を開始し、いくつかのドロップダウン値を選択すると何もチェックされません..またはいくつかのチェックだけ..それは本当に奇妙です。

以下はコードです。

セレクタコード：

<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> 

チェックボックスの簡単な例。私はそれらの36を持っている、私はこの投稿を巨大にしないので、1-8を投稿するだけ。

<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> 

最後にJavaScriptコード。

<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> 

私はそれらをすべて1つのスクリプトタグに入れることができます。私が最初にそれをしたときにはうまくいきませんでした。まだファンキーな演技。

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> 

このaswell、同じ問題のようにそれをやりました。

Answer 1

RayonDabreと私の頭脳にも感謝します。私はそれを解決した。

正常に動作するjqueryは次のとおりです。

$('#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); 
} 

}）;