用单选按钮切换复选框

Question

Building on this answer I'm trying to use a radio button to check all checkboxes on toggle but if it's not toggled they should show unchecked or disabled. They control the layers on map the default should be all on and users can then remove them.

Here's the fiddle for what I've tried below;

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

Clarification: in the fiddle if you click the extra radio button no checkboxes should be checked

Answer 1

The id attribute of an HTML element should be unique, so the repeated use of check and check2 make your HTML invalid. I would just drop those id attributes.

One way to do what you need, and also avoid code repetition, is to mark the checkbox elements with data attributes which refer to the radiobutton for which it should be checked.

Here is how that would look:

 $('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

it is better to handle with class name when u have number of items.please check the below code it might help you to select all and reset all.

 $('.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>