CODEWITHSUNDEEP
javascripthtml
David Raouf
David Raouf

Reputation: 3

how to group radio buttons with different names

//group "a"
1 <input type="radio" name="a" value="1" required>
2 <input type="radio" name="a" value="2">
3 <input type="radio" name="a" value="3">
4 <input type="radio" name="a" value="4">

//group "b"
1 <input type="radio" name="b" value="1" required>
2 <input type="radio" name="b" value="2">
3 <input type="radio" name="b" value="3">
4 <input type="radio" name="b" value="4">

how to deselect radio button from group "a" with value "1" if i checked radio button from group "b" with same value "1", but not deselect radio button from group "a" with value "1" if i checked radio button from group "b" with different value "2"

Upvotes: 0

Views: 1809

Answers (2)

El_Vanja
El_Vanja

Reputation: 3983

Seems a better approach would be to disable the corresponding values.

$(document).ready(() => {
    function disableCorrespondingRadioButton(name, value) {
        // fetch all inputs of given name
        // we need to iterate them all to enable those that might have been disabled earlier
        $('input[name="' + name + '"]').each(function (index, radio) {
            // disable the one of same value as the checked value
            if (radio.value == value) {
                radio.disabled = true;
            } else {
                radio.disabled = false;
            }
        });
    }
    // assign same functionality to both radios' onchange event handler
    $('input[name="a"]').change(function () {
        disableCorrespondingRadioButton('b', $(this).val());
    });
    $('input[name="b"]').change(function () {
        disableCorrespondingRadioButton('a', $(this).val());
    });
});
<html>
<head></head>
<body>
    Group "a"
    1 <input type="radio" name="a" value="1" required>
    2 <input type="radio" name="a" value="2">
    3 <input type="radio" name="a" value="3">
    4 <input type="radio" name="a" value="4">
    <br>
    Group "b"
    1 <input type="radio" name="b" value="1" required>
    2 <input type="radio" name="b" value="2">
    3 <input type="radio" name="b" value="3">
    4 <input type="radio" name="b" value="4">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>

This way whenever a value is selected on one of the radio buttons, the same value in the other one will be disabled. It will send a clearer message to the user than unchecking the option.

Upvotes: 0

ikiK
ikiK

Reputation: 6532

I use classes for this, I see you need one choice from each line and they can not be of same value?

This way you can add as much classes you want and connect them as you want and do all sort of combinations on radio buttons and check-boxes while your form names and values stay the same for form submit-ion. 

$('input.a').on('change', function() {
    $('input.a').not(this).prop('checked', false);  
});
$('input.b').on('change', function() {
    $('input.b').not(this).prop('checked', false);  
});
$('input.c').on('change', function() {
    $('input.c').not(this).prop('checked', false);  
});
$('input.d').on('change', function() {
    $('input.d').not(this).prop('checked', false);  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="a" type="radio" name="a" value="1" required>1
<input class="b" type="radio" name="a" value="2">2
<input class="c" type="radio" name="a" value="3">3
<input class="d" type="radio" name="a" value="4">4
</br>

<input class="a" type="radio" name="b" value="1" required>1
<input class="b" type="radio" name="b" value="2">2
<input class="c" type="radio" name="b" value="3">3
<input class="d" type="radio" name="b" value="4">4

Upvotes: 1

Related Questions