javascript - 使用单选按钮切换复选框

Question

在此答案的基础上，我尝试使用单选按钮检查切换时的所有复选框，但如果未切换，它们应该显示为未选中或禁用。他们控制地图上的图层，默认应该全部打开，然后用户可以删除它们。

这是我在下面尝试过的小提琴；

$('input[value="energyRating"]').change(function() {
    if ($(this).is(':checked')){ //radio is now checked
        $('input[id="check2"]').prop('checked', true);
        $('input[id="check"]').prop('checked', false);
        } 
        else { //radio is now checked
        $('input[id="check2"]').prop('checked', false);
        $('input[id="check"]').prop('checked', false);
        }
});

澄清：在小提琴中，如果您单击额外的单选按钮，则不应选中任何复选框

标签： javascriptjqueryhtml

Answer 1

一个 HTML 元素的id属性应该是唯一的，所以重复使用check会使check2你的 HTML 失效。我会放弃这些id属性。

一种满足您需要并避免代码重复的方法是使用数据属性标记复选框元素，这些数据属性引用应检查的单选按钮。

这是看起来的样子：

$('input[name="sex"]').change(function() {
    var selected = $('input[name="sex"]:checked').val();
    $('input[name="vehicle"]').each(function () {
        $(this).prop('checked', $(this).data("rating") === selected);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  <input  type="radio" name="sex" value="energyRating">energyRating<br>
  <input  type="radio" name="sex" value="energyRatingByCount">energyRatingByCount<br>
  <input  type="radio" name="sex" value="extra">extra
</div>

<div id="b">
  <input type="checkbox" data-rating="energyRating" name="vehicle" value="Bike1">I have a bike<br>
  <input type="checkbox" data-rating="energyRating" name="vehicle" value="Car">I have a car <br>
  <input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Bike">I have another bike<br>
  <input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Car">I have another car
</div>