Question

所以我有这个代码来根据下拉列表的选定值来检查某些复选框。问题是，他们几乎取消了彼此。如果我只把一个放在那里它工作正常。即使我把两个放入其中工作正常。然而，当我放入所有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>

我知道我可以将它们全部放在一个脚本标签中。当我最初这样做时，它没有工作，所以我最终把这些都放在这样，看看它是否有效。仍然表现得很时髦。

更新

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

它是否也喜欢这样，同样的问题。

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);
}

}）;

根据下拉列表检查复选框

1 个答案: