Как отменить выбор радиокнопки и повторно выбрать кнопку по умолчанию при нажатии?

Question

В основном я хочу иметь три переключателя. Первый выбран по умолчанию. Вы нажимаете второй, и он становится выбранным. Но если вы щелкнете второй еще раз, после того, как он уже выбран, я бы вместо этого выбрал первый. То же самое относится ко второму и к третьему.

Любая помощь приветствуется! ^ _ ^

Answer 1

вот мое решение (без метра, сколько флажков вы используете, этот код будет работать):

ЯШ:

var curr = '';
var prev = '';

$('input').on('click', function(){

  if( curr == $(this).attr('id') ){

    if( prev != '' ){

        $("#"+prev).prop('checked',true);

        prev = '';

    }

    return;

  }

  prev = curr;

  curr = $(this).attr('id');

});

HTML:

<input id="rad1" value="1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" value="2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
<input id="rad3" value="3" type="radio" name="rad"/><label for="rad3">Radio 3</label>

Fiddle

Answer 2

используйте приведенный ниже код для выполнения вашего требования.

function CheckDefault()
{
if(this.checked){ document.getElementById('rad1').checked=true;}
}


<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad" onclick="CheckDefault()"/><label for="rad2">Radio 2</label>
<input id="rad3" type="radio" name="rad" onclick="CheckDefault()"/><label for="rad3">Radio 3</label>

Answer 3

Я использовал радиокнопку onclick логика функции события для получения требуемой функциональности:

<p>Select your choice:</p>
<div>
    <input type="radio" id="choice1" name="val" value="1" onclick="app(this.value)">
    <label for="choice1">First</label>
    <input type="radio" id="choice2" name="val" value="2" onclick="app(this.value)">
    <label for="choice2">Second</label>
    <input type="radio" id="choice3" name="val" value="3" onclick="app(this.value)">
    <label for="choice3">Third</label>
</div>
<script src="app.js"></script>

app.js

var radio2Counter = 0;
var radio3Counter = 0;

function app(selectedVal) {

    switch(selectedVal) {
        case '2':
            radio3Counter = 0;
            if (++radio2Counter == 2) {
                document.getElementById('choice1').checked = true;
                radio2Counter = 0;
            }
            break;
        case '3':
            radio2Counter = 0;
            if (++radio3Counter == 2) {
                document.getElementById('choice1').checked = true;
                radio3Counter = 0;
            }
            break;
        default:
            // console.log('Radio 1');
    }
}

Answer 4

вы можете выбрать переключатель с помощью css и выполнить любые стили там

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
<input id="rad3" type="radio" name="rad"/><label for="rad3">Radio 3</label>