Проверка флажков на основе раскрывающегося списка ВОПРОС

Таким образом, у меня есть этот код для проверки определенных флажков на основе выбранного значения выпадающего списка. Проблема в том, что они почти отменяют друг друга. Если я только поставлю туда, он отлично работает. Даже если я положил два, все будет хорошо. Однако, когда я помещаю все 7 элементов javascript, он начинает действовать странно, и когда я выбираю некоторые значения выпадающего списка, ничего не проверяется. Или только некоторые проверяются. Это действительно странно.Проверка флажков на основе раскрывающегося списка ВОПРОС

Ниже приведен код.

Selector Код:

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

Я знаю, что могу поместить их все в один тег сценария. Это не работало, когда я изначально это делал, поэтому в итоге я их все так же вижу, если это работает. Все еще действует фанки.

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, тот же вопрос.

источник

2016-04-22 Kevin

Пожалуйста, не повторяйте себя! _ В коде, а также вопросы :) – Rayon

Извините, я неправильно понял вопрос, это не дубликат. –

@ RayonDabre Святой Иисус не является повторением. прочитайте вещь, прежде чем вы, ребята, прыгаете по моей спине. Это разные проблемы. Период. – Kevin

С уважением, 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); 
}

});

источник

2016-04-22 13:49:41 Kevin

Хотя он работает хорошо. Использование атрибута' data- * 'сделает его лучше! – Rayon

https://jsfiddle.net/ov6z2L3a/4/ – Rayon

Проверка флажков на основе раскрывающегося списка ВОПРОС

ответ

Смежные вопросы