根据 label html 使用 jquery 更改单选按钮选中属性

Question

I have a select drop down and if the onchange of select drop-down the option is yes than all the radio buttons should change to yes

<select class="is_poly_cover">
   <option>No</option>
   <option>Yes</option>
</select>



<input type="radio"  name="v1" class=" additional_option_type_7" checked="checked" value="251">
<label class="" for="251">YES</label>

<input type="radio" name="v1" class=" additional_option_type_7" value="254">
<label class="" for="254">NO</label>

<input type="radio"  name="v2" class=" additional_option_type_8" checked="checked" value="255">
<label class="" for="255">YES</label>

<input type="radio" name="v2" class=" additional_option_type_8"  value="256">
<label class="" for="256">NO</label>

Note: Everthing here is made dynamically and i dont have access to change the html so cannot add classes or id to the elements.

Here on change of is_poly_cover if its yes than all radio button goes to yes and if is_poly_cover no than all radio btns goes to No

attempt:

var set_classes = ['additional_option_type_8','additional_option_type_7'];

$('body').delegate('.is_poly_cover', 'change', function(e) {
    var is_poly_cover_text = $(".is_poly_cover").find("option:selected").text().toLowerCase();
    if(is_poly_cover_text == 'yes'){
        var label = '';
        var req_elem = '';
        for(var i=1;i<set_classes.length;i++) {
            req_elem = "."+set_classes[i];
            //console.log(req_elem)
            label = $(req_elem).next().html().toLowerCase();
            console.log(label)
        }

    }
});

Answer 1

You can use .each loop to iterate through your labels and see if its value match with select if yes add radio checked above it to true .

Demo Code :

 $('body').delegate('.is_poly_cover', 'change', function(e) { var values = $(this).val().toUpperCase(); console.log(values) //remove checked from radios $('[class*=additional_option_type_]').prop("checked", false) //loop through label (give some class to label then change label.thatclass_name) $("label").each(function() { //check value is same if ($(this).text() == values) { //add checked to radio $(this).prev().prop("checked", true) } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="is_poly_cover"> <option>No</option> <option>Yes</option> </select> <input type="radio" name="v1" class="additional_option_type_7" value="251"> <label class="" for="251">YES</label> <input type="radio" name="v1" class=" additional_option_type_7" value="254"> <label class="" for="254">NO</label> <input type="radio" name="v2" class=" additional_option_type_8" value="255"> <label class="" for="255">YES</label> <input type="radio" name="v2" class=" additional_option_type_8" value="256"> <label class="" for="256">NO</label>

Answer 2

 setRadioButton(); $('.is_poly_cover').change(function() { setRadioButton(); }); function setRadioButton() { if($('.is_poly_cover:selected').text() == "Yes") { $('body input[type=radio]').each(function(){ var value = $(this).attr('checkedvalue'); if(value == 1) { $(this).prop('checked',true); } }); } else { $('body input[type=radio]').each(function(){ var value = $(this).attr('checkedvalue'); if(value == 0) { $(this).prop('checked',true); } }); } }

 <select class="is_poly_cover"> <option>No</option> <option>Yes</option> </select> <input type="radio" name="v1" class=" additional_option_type_7" checkedvalue="1" checked="checked" value="251"> <label class="" for="251">YES</label> <input type="radio" name="v1" class=" additional_option_type_7" checkedvalue="0" value="254"> <label class="" for="254">NO</label> <input type="radio" name="v2" class=" additional_option_type_8" checkedvalue="1" checked="checked" value="255"> <label class="" for="255">YES</label> <input type="radio" name="v2" class=" additional_option_type_8" checkedvalue="0" value="256"> <label class="" for="256">NO</label> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>