Question

我想选择基于css类属性的复选框，如果我选择了admin，则应选中.cb的所有复选框，并将所选复选框的值设置为true。如果任何一个选择，则应选中具有属性.biller的复选框，并且只有选中的复选框值应该为真

我在这里尝试了代码https://jsfiddle.net/xrcwrn/79bm3Lfn/ 如果做得不好，这是行不通的。

Answer 1

检查此代码。你下载值admin，biller等所以更新if (selectedValue === "admin") , if (selectedValue === "biller")等

   $(document).ready(function () {
    $(document).on('change', '#role', function () {
        var selectedValue = $(this).val();
        if (selectedValue === "admin") {
            $(".cb").prop('checked', 'checked');
            $(".cb").val("true");
        }
        if (selectedValue === "biller") {
            $('.cb').prop("checked", false);
            $(".biller").prop('checked', 'checked');
            $(".biller").val("true");
        }
         if (selectedValue === "hr") {
            $('.cb').prop("checked", false);
            $(".hr").prop('checked', 'checked');
            $(".hr").val("true");
        }
        if (selectedValue === "sales") {
            $('.cb').prop("checked", false);
            $(".sales").prop('checked', 'checked');
            $(".sales").val("true");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="role">
  <option value="admin">admin</option>
  <option value="biller">biller</option>
  <option value="hr">hr</option>
  <option value="sales">sales</option>
</select>
<div>
  <h3>Test <input type="checkbox" class="cb biller" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>
<div>
  <h3>Test1 <input type="checkbox" class="cb biller" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller hr" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller hr" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>
<div>
  <h3>Test2 <input type="checkbox" class="cb biller sales" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller hr" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller hr sales" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>

Answer 2

以下是更新后的代码：

$(document).on('change', '#role', function() {
  $('input').prop('checked', false);
  var selectedValue = $(this).val();
  console.log(selectedValue);
  if (selectedValue === 'admin') {
    selectedValue = 'cb';
  }
  $("." + selectedValue).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="role">
  <option value="admin">admin</option>
  <option value="biller">biller</option>
  <option value="hr">hr</option>
  <option value="sales">sales</option>
</select>
<div>
  <h3>Test <input type="checkbox" class="cb biller" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>
<div>
  <h3>Test1 <input type="checkbox" class="cb biller" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller hr" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller hr" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>
<div>
  <h3>Test2 <input type="checkbox" class="cb biller sales" /></h3>
  <span class="space">One <input type="checkbox" class="cb biller hr" id="pr" name="aa"/></span>
  <span class="space">
  Two
  <input type="checkbox" class="cb biller hr sales" id="pr" name="aa" />
  </span>
  <span class="space">Three <input type="checkbox" class="cb biller" id="pr" name="aa"/></span>
</div>

选择选项上的复选框值并基于类属性

2 个答案: