HTML Form, выберите кнопку только один радиоприемника из трех радиоприемников

В HTML форме есть три набора кнопок радио для трех классов, напримерHTML Form, выберите кнопку только один радиоприемника из трех радиоприемников

Class 1 
<input id="Level1" name="Classl" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Classl" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Classl" type="radio" value="Level3" />Level 3<br> 
Class 2 
<input id="Level1" name="Class2" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Class2" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Class2" type="radio" value="Level3" />Level 3<br> 
Class 3 
<input id="Level1" name="Class3" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Class3" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Class3" type="radio" value="Level3" />Level 3<br> 
<input id="Level4" name="Class3" type="radio" value="Level4" />Level 4<br>

В это время, пользователь может выбрать один из каждого радиоприемник. Мы хотим, чтобы они выбирали только один переключатель, из всех из них. Его среднее значение, пользователь может выбрать только один уровень из трех классов.

Пожалуйста, предложите что-нибудь, возможно, в Javascript/JQuery.

источник

2016-03-29 qammar feroz

Затем дает такое же имя для всех тех, 3 набора переключателей –

@Rajaprabhu Aravindasamy Мы не можем дать такое же имя для все они, поскольку мы хотим отслеживать выбор класса. –

вы можете отследить выбор по id –

Попробуйте это;)

$(function(){ 
 
    $('input[type="radio"].classOnly').on('change', function(){ 
 
    $('input[type="radio"].classOnly:checked').not(this).attr('checked', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Class 1 
 
<input id="Level1" name="Classl" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Classl" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Classl" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
Class 2 
 
<input id="Level1" name="Class2" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Class2" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Class2" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
Class 3 
 
<input id="Level1" name="Class3" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Class3" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Class3" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
<input id="Level4" name="Class3" type="radio" class="classOnly" value="Level4" />Level 4<br>

источник

2016-03-29 12:47:05 itzmukeshy7

благодарит вас за код, это длинная форма, мы делаем это ограничение только для этих 3 радиостанций. не для всех. –

обновленный ответ, применимый к группе по атрибуту class 'classOnly'; – itzmukeshy7

Да, сейчас он работает, как мы этого хотим. спасибо –

Мы не можем дать такое же имя для всех из них, как мы хотим, чтобы отслеживать выбор класса слишком

Тогда выбор класса должен быть частью значения.

<label> 
    <input id="Level1" name="Class" type="radio" value="Classl-Level1" /> 
    Level 1 
</label>

источник

2016-03-29 12:40:18 Quentin

Попробуйте это, я не рекомендовал бы использовать тот же идентификатор несколько раз, использовать класс вместо этого.

$('.radioCollection').find('input:radio').on('click', function() { 
 

 
    $('.radioCollection').find('input:radio').not($(this)).attr('checked', false); 
 

 
    //you can remove below code 
 

 
    var mainId = $(this).closest('.radioCollection').attr('id'); // class1 || class2 || class3 
 

 
    var log = ''; 
 
    if ($(this).hasClass('Level1')) { 
 
    //Level1 
 
    log = 'Level1'; 
 

 
    } else if ($(this).hasClass('Level2')) { 
 
    //Level2 
 
    log = 'Level2'; 
 
    } else if ($(this).hasClass('Level3')) { 
 
    //Level3 
 
    log = 'Level3'; 
 
    } else if ($(this).hasClass('Level4')) { 
 
    //Level4 
 
    log = 'Level4'; 
 
    } 
 

 
    $('.tempLog') 
 
    .html('Selected Main Class: <span>' + mainId + '</span><br/> Selected Radio Class: <span>' + log + '</span>'); 
 
})

.tempLog { 
 
    padding: 10px; 
 
    background: #eee; 
 
    margin: 5px 0; 
 
    color: #888; 
 
} 
 
.tempLog span { 
 
    color: #000; 
 
    font-weight: 800; 
 
} 
 
input:radio { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tempLog"></div> 
 

 
Class 1 
 
<div id="class1" class="radioCollection"> 
 
    <input class="Level1" name="Classl" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Classl" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Classl" type="radio" value="Level3" />Level 3 
 
    <br> 
 
</div> 
 
Class 2 
 
<div id="class2" class="radioCollection"> 
 
    <input class="Level1" name="Class2" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Class2" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Class2" type="radio" value="Level3" />Level 3 
 
</div> 
 
<br>Class 3 
 

 
<div id="class3" class="radioCollection"> 
 
    <input class="Level1" name="Class3" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Class3" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Class3" type="radio" value="Level3" />Level 3 
 
    <br> 
 
    <input class="Level4" name="Class3" type="radio" value="Level4" />Level 4</div> 
 
<br>

Надеется, что это помогает .. :)

источник

2016-03-29 12:53:10

HTML Form, выберите кнопку только один радиоприемника из трех радиоприемников

ответ

Смежные вопросы