проверка и снятие отметки с переключателей - PullRequest
Новая
       14

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

0 голосов
/ 15 апреля 2019

Есть ли способ, когда переключатель из верхнего ряда отмечен, тогда все нижние не отмечены, и наоборот?Если выбран переключатель из нижнего ряда, для всех верхних устанавливается значение 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>

Ответы [ 3 ]

1 голос
/ 15 апреля 2019

С помощью 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

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

1 голос
/ 16 апреля 2019

После очистки кода я бы использовал две разные функции JavaScript onclick для достижения желаемого результата.При очистке кода мы должны идентифицировать каждый переключатель кнопки obj с уникальным идентификатором.Мы также должны поместить код в тело 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>
1 голос
/ 15 апреля 2019

Конечно. Это можно сделать очень легко с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...