Проверка и снятие переключателей

Есть ли способ, когда радиокнопка в верхнем ряду отмечена, а все нижние не отмечены, и наоборот? Когда выбрана радиокнопка из нижнего ряда, все верхние устанавливаются в false

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <div id = "base-1">
        Forward
        <form name = "group_A" style = "margin-top:5px">
            <input value = "0" type = "radio" name = "button" checked/>
            <span> 0 &nbsp &nbsp</span>
            <input value = "1" type = "radio" name = "button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value = "2" type = "radio" name = "button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value = "3" type = "radio" name = "button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <hr>
    <div id = "base-2">
        Backward
        <form name = "group_B" style = "margin-top:5px">
            <input value = "0" type = "radio" name = "button"/>
            <span> 0 &nbsp &nbsp</span>
            <input value = "1" type = "radio" name = "button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value = "2" type = "radio" name = "button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value = "3" type = "radio" name = "button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
</head>
<body>

</body>
</html>

jquery html twitter-bootstrap radio-button

15.04.2019 22:43

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Конечно. Это можно сделать очень легко с помощью jQuery. Вот скрипт, который снимает все другие переключатели в документе с тем же атрибутом name.

Это работает путем привязки события к событию change всех переключателей. Это событие проверит, меняется ли радиокнопка на checked, и если это так, оно будет искать в теле все другие радиокнопки с тем же атрибутом name и изменять их свойство checked на false с помощью .prop().

$("input[type=radio]").change(function(){

  if ($(this).prop("checked"))
  {
    $("body").find("input[type=radio][name = "+$(this).attr("name")+"]").prop("checked", false);
    $(this).prop("checked", true);
  }

});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id = "base-1">
        Forward
        <form name = "group_A" style = "margin-top:5px">
            <input value = "0" type = "radio" name = "button" checked/>
            <span> 0 &nbsp &nbsp</span>
            <input value = "1" type = "radio" name = "button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value = "2" type = "radio" name = "button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value = "3" type = "radio" name = "button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <hr>
    <div id = "base-2">
        Backward
        <form name = "group_B" style = "margin-top:5px">
            <input value = "0" type = "radio" name = "button"/>
            <span> 0 &nbsp &nbsp</span>
            <input value = "1" type = "radio" name = "button"/>
            <span> 1 &nbsp &nbsp</span>
            <input value = "2" type = "radio" name = "button"/>
            <span> 2 &nbsp &nbsp</span>
            <input value = "3" type = "radio" name = "button"/>
            <span> 3 &nbsp &nbsp</span>
        </form>
    </div>
    <h3>This one shouldn't change</h3>
    <input type = "radio" name = "otherbutton">
</body>
</html>

Большое спасибо, я был немного сбит с толку, потому что читал, что группы переключателей всегда имеют один флажок. Я, должно быть, ошибся, я думаю....

— 15.04.2019 23:00

Обычно это так, но вы можете переопределить поведение по умолчанию с помощью javascript/jquery.

— 15.04.2019 23:01

15.04.2019 22:51

С JQuery это можно сделать с помощью нескольких строк.

$('#base-2 input').click(function() {
   $('#base-1 input').prop('checked', false)
})

$('#base-1 input').click(function() {
   $('#base-2 input').prop('checked', false)
})

Кроме того, я бы рекомендовал переместить ваш контент из head в body

Надеюсь, это поможет!

15.04.2019 22:55

После очистки кода я бы использовал две разные функции JavaScript onclick, чтобы получить желаемый результат. При очистке кода нам нужно идентифицировать каждый объект радиокнопки уникальным идентификатором. Нам также нужно поместить код в тело html, а не в заголовок.

            <!DOCTYPE html>
            <html lang = "en">
            <head>
                <meta charset = "UTF-8">
                <title>Title</title>        
            </head>
            <body>
                <div id = "base-1">
                    Forward
                    <form name = "group_A" style = "margin-top:5px">
                        <input value = "0" type = "radio" id = "btnTop0" name = "btnTop0"  onclick = "uncheckBottom()" checked />
                        <span> 0 &nbsp &nbsp</span>
                        <input value = "1" type = "radio" id = "btnTop1" name = "btnTop1"  onclick = "uncheckBottom()" />
                        <span> 1 &nbsp &nbsp</span>
                        <input value = "2" type = "radio" id = "btnTop2" name = "btnTop2"  onclick = "uncheckBottom()"  />
                        <span> 2 &nbsp &nbsp</span>
                        <input value = "3" type = "radio" id = "btnTop3" name = "btnTop3"   onclick = "uncheckBottom()" />
                        <span> 3 &nbsp &nbsp</span>
                    </form>
                </div>
                <hr>
                <div id = "base-2">
                    Backward
                    <form name = "group_B" style = "margin-top:5px">
                        <input value = "0" type = "radio" id = "btnBottom0" name = "btnBottom0" onclick = "uncheckTop()"/>
                        <span> 0 &nbsp &nbsp</span>
                        <input value = "1" type = "radio" id = "btnBottom1" name = "btnBottom1" onclick = "uncheckTop()"/>
                        <span> 1 &nbsp &nbsp</span>
                        <input value = "2" type = "radio" id = "btnBottom2" name = "btnBottom2" onclick = "uncheckTop()"/>
                        <span> 2 &nbsp &nbsp</span>
                        <input value = "3" type = "radio" id = "btnBottom3" name = "btnBottom3" onclick = "uncheckTop()"/>
                        <span> 3 &nbsp &nbsp</span>
                    </form>
                </div>

            <script>
             function uncheckBottom(){
                  document.getElementById("btnBottom0").checked = false;
                  document.getElementById("btnBottom1").checked = false;
                  document.getElementById("btnBottom2").checked = false;
                  document.getElementById("btnBottom3").checked = false;
             }

             function uncheckTop(){
                  document.getElementById("btnTop0").checked = false;
                  document.getElementById("btnTop1").checked = false;
                  document.getElementById("btnTop2").checked = false;
                  document.getElementById("btnTop3").checked = false;
             }
        </script>

        </body>
        </html>

Спасибо! Хотел бы я принять все три ответа. Очень ценю вашу помощь!

— 16.04.2019 00:06

Рад помочь. Помните, что если вы используете jquery, вам нужно будет ссылаться на библиотеку jquery либо через CDN, либо локально. w3schools.com/jquery/jquery_get_started.asp

— 16.04.2019 12:30

15.04.2019 23:16