Question

在这里，我有一个下拉列表，其中包含值的选项，还有一些复选框，其值与下拉框相同。所以我要做的是当我从下拉列表中选择选项时，应该选中具有相同值的复选框。

，例如 如果我从下拉列表中选择选项设计器，则应选择与设计器相关的复选框，因为它们具有相同的值。如果我从下拉列表中选择工程师，则应选中工程师复选框并进行其他检查盒子应该取消选中。我怎么能这样做？

这是我尝试过的：

<select id="task_for_role" class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


    <input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
    <input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>


    <script type="text/javascript">
        $(function(){
            $('#task_for_role').change(function() {
                var selected = $('#task_for_role option:selected');
                if (selected.val() == "null") {
                    $('input[name="role[]"]').prop('checked', false);
                }
                else {
                    $('input[name="role[]"]').prop('checked', true);
                }
            });
        });
    </script>

Answer 1

您可以使用value属性来实现此目的

$(function () {
 $('#task_for_role').change(function () {
   var val = $(this).val();
   $('input[name="role[]"]').prop('checked', false);
   $('input[name="role[]"][value=' + val + ']').prop('checked', true);

  });
});

此外，您已为id指定了select两次，因此请删除一个

<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
</select>

注意

我已编写代码，如果您需要选中多个复选框，则一次只能检查一个复选框

$('input[name="role[]"]').prop('checked', false);

Answer 2

这可以这样做。你在同一个元素中有两个id是不允许的，所以我忽略了第一个并使用了#task_for_role。

当文件加载时它也可以工作，因为我已经解雇.change（）at 结束。

$('#task_for_role').change(function() {
    var selected = $(this).val();
    $('input[type="checkbox"]').attr('checked', false);
    $('input[value="' + selected + '"]').prop('checked', true);
}).change();

＆＃13;

$(function() {
  $('#task_for_role').change(function() {
    var selected = $(this).val();
    $('input[type="checkbox"]').attr('checked', false);
    $('input[value="' + selected + '"]').prop('checked', true);
  }).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>

＆＃13;

Answer 3

您的select代码中有两个id属性！ id="task_for"和id="task_for_role"

应更正为：

<select class="multi-selector" id="task_for_role" name="task_for">

您的价值分配错误：

var selected = $('#task_for_role option:selected');
if (selected.val() == "null") {

应该是：

var selected = $('#task_for_role');
if (selected.val() == "null") {

或......

var selected = $('#task_for_role option:selected');
if (selected.attr('value') == "null") {

Answer 4

试试这个工作：

<强> HTML

<select class="multi-selector" id="task_for_role" name="task_for">
        <option value="0">Select</option>
        <option value="3">Engineer</option>
        <option value="4">Designer</option>
        <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>

<强>脚本

<script type="text/javascript">
    $(function () {
        $('#task_for_role').change(function () {

            if ($('#task_for_role').val() == "0") {
                $('input:checkbox').prop('checked', false);
            }
            else {
                $('input:checkbox').prop('checked', false);
                $('input[value=' + $('#task_for_role').val() + ']:checkbox').prop('checked', true);
            }
        });
    });
</script>

Answer 5

$('#task_for_role').change(function() {
  var selected = $('option:selected', this).val();
  console.log(selected)
  $(':checkbox[value=' + selected + ']').prop('checked', true);
  $(':checkbox[value=' + selected + ']').siblings().prop('checked', false);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-selector" id="task_for_role" name="task_for">
    <option value="3">Engineer</option>
    <option value="4">Designer</option>
    <option value="5">Architect</option>
    </select>


<input type="checkbox" name="role[]" class="checkvalue" value="3">Engineer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="4">Designer<br>
<input type="checkbox" name="role[]" class="checkvalue" value="5">Architect<br>

在select元素

上删除另一个id属性

选中下拉值选择复选框

5 个答案: