Question

在此answer的基础上，我试图使用单选按钮来选中切换上的所有复选框，但如果未切换，则它们应显示为未选中或已禁用。他们控制地图上的图层，默认应全部启用，然后用户可以将其删除。

以下是我尝试过的fiddle；

$('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);
        }
});

说明：如果您单击多余的单选按钮，则不应选中任何复选框

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>

Answer 2

当您有许多项时，最好使用类名进行处理。请检查下面的代码，它可能会帮助您选择全部并重置所有内容。

$('.click').click(function() {
				//select all radio is now checked
        $('.event').prop('checked', true);
        $('.reset').prop('checked', false);
});

$('.reset').click(function() {
//reset radio is now checked
				$('.click').prop('checked', false);
        $('.event').prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  <input  type="radio" class="click" value="energyRating">select all<br>
    <input  type="radio" class="reset"  value="extra">reset
  
</div>

<div id="b">
  <input id ='check' type="checkbox" class="event"  value="Bike1">I have a bike<br>
  <input id ='check' type="checkbox" class="event" value="Car">I have a car <br>
<input id ='check2' type="checkbox" class="event" value="Bike">I have another bike<br>
  <input id ='check2' type="checkbox" class="event" value="Car">I have another car
</div>

用单选按钮切换复选框

2 个答案: