Javascript 基于下拉问题选中复选框_Javascript_Html

Javascript 基于下拉问题选中复选框

javascript html

Javascript 基于下拉问题选中复选框,javascript,html,Javascript,Html,因此，我用这段代码根据下拉列表中的选定值选中某些复选框。问题是，他们几乎相互抵消。如果我只放一个在那里，它工作得很好。即使我在里面放了两个也没问题。然而，当我放置所有7个javascript项时，它开始表现出奇怪的行为，当我选择一些下拉值时，没有任何内容得到检查。。或者只有一些被检查过。。真奇怪下面是代码选择器代码： <select class='form-control' id='department' name='department' placeholder='Departmen

因此，我用这段代码根据下拉列表中的选定值选中某些复选框。问题是，他们几乎相互抵消。如果我只放一个在那里，它工作得很好。即使我在里面放了两个也没问题。然而，当我放置所有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>


1.
2.
3.
4.
5.
6.
7.

复选框的简要示例。我有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>


$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck15，#ck18，#ck16，#ck20，#ck1，#ck8，#ck6，#ck5，#ck21，#ck22”）.prop（'checked'，text=='1'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck12，#ck16，#ck17，#ck18，#ck2，#ck4，#ck7，#ck23，#ck25，#ck33，#ck35，#ck36，#ck20'）。道具（'checked'，text='2'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck12，#ck20，#ck23，#ck25，#ck26，#ck27，#ck28，#ck35，#ck36”）.prop（'checked'，text=='3'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck1，#ck5，#ck6，#ck8，#ck12，#ck13，#ck15，#ck16，#ck18，#ck20”）.prop（'checked'，text='4'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck3，#ck5，#ck6，#ck8，#ck12，#ck13，#ck15，#ck16，#ck20，#ck21，#ck22，#ck23，#ck34'）。道具（'checked'，text='5'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck3，#ck5，#ck6，#ck8，#ck13，#ck21，#ck20，#ck22，#ck23，#ck29，#ck30，#ck31，#ck32'）。道具（'checked'，text='6'）；
});
$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.text（）；
$（“#ck9，#ck10，#ck11，#ck3，#ck5，#ck6，#ck8，#ck20，#ck21，#ck22，#ck23，#ck24，#ck25，#ck34”）.prop（'checked'，text='7'）；
});

我知道我可以把它们都放在一个脚本标签中。当我最初这样做的时候，它不起作用，所以我最后也把它们都像这样放了起来，看看它是否起作用。仍然表现得很古怪

更新

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


$（“#部门”）。更改（职能（）{
var text=$（“#部门：选定”）.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'）。道具（'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'）。道具（'checked'，text='5'）；
$（“#ck9，#ck10，#ck11，#ck3，#ck5，#ck6，#ck8，#ck13，#ck21，#ck20，#ck22，#ck23，#ck29，#ck30，#ck31，#ck32'）。道具（'checked'，text='6'）；
$（“#ck9，#ck10，#ck11，#ck3，#ck5，#ck6，#ck8，#ck20，#ck21，#ck22，#ck23，#ck24，#ck25，#ck34”）.prop（'checked'，text='7'）；
});

也是这样，同样的问题。

谢谢雷昂达布和我自己的大脑。我已经解决了

下面是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);
}

}))

请不要重复！在代码和问题中：）对不起，我看错了问题，它不是重复的。@Kevin，我对问题不太清楚。。但他妈的对代码有把握！与10个侦听器不同，您应该有1个侦听器来处理所有permutations@RayonDabre告诉我我是否复制了此代码。。。。给我看一个我用这个的帖子。我没有。虽然它工作得很好。。使用

data-*

属性将使它看起来更好！