如何从jquery中Select元素中的选定选项中删除复选框元素

Question

当在 SELECT 元素中单击文本或值相同的选择选项时，我试图删除复选框元素。 For example, when option value College GWA is selected, the equivalent CheckBox labeled College GWA should be removed.

选择元素：

 <select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option

复选框元素：

 <div id="div_id_features" class="form-group">
   <label for="" class=""> Feature </label>
     <div class="">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA" >
            <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>
        
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study" >
            <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>
        
        </div>
   
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre" >
          <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>       
         </div>

jQuery 代码：

   $("select.target_column").change(function(){
        var selected_col = $(this).children("option:selected").val();

        $("input[name='feature_manual']:contains".join(selected_col)).remove();
    });

Answer 1

此版本是使用您尝试使用的选择器contains 制作的，但显然要求select 值不包含在多个标签中。 当然 charlietfl 的解决方案更可靠。

$(document).ready(function() {

  $("#id_target_column").change(function() {
    
    var selected_col = $(this).val();
    $("input[name='feature_manual']~label:contains('" + selected_col + "')").parent().remove();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option>
</select>
<br>
  Checkbox Element:

  <div id="div_id_features" class="form-group">
    <label for="" class=""> Feature </label>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA">
      <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>

    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study">
      <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>

    </div>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre">
      <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>
    </div>

  </div>

Answer 2

使用filter()，因为:contains() 仅适用于文本内容，不适用于表单控件值。

或者，您可以使用 each 遍历所有复选框

$('#id_target_column').change(function() {
  var selVal = $(this).val()
  $("input[name='feature_manual']").filter(function() {
    var checkVal = this.value;
    return checkVal === selVal;
  }).parent().remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option>

</select>
<div id="div_id_features" class="form-group">
  <label for="" class=""> Feature </label>
  <div class="">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA">
      <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>

    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study">
      <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>

    </div>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre">
      <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>
    </div>

Answer 3

您可以使用模板文字来找到正确的选择器。首先，在您的选择元素中，target_column 不是一个类，因此使用它的 id 会更容易。 由于复选框中的值 attr 与选项相同，您可以这样做：

$("#id_target_column").change(function(){

  var selected_col = $(this).children("option:selected").val();
  const checkbox_selector = `input[value="${selected_col}"]`
  $(checkbox_selector).parent().remove();

});

并删除父级，因此标签也会被删除。