При нажатии DIV установите несколько флажков (не с тем же именем)
Моя радиокнопка называется динамически. Как установить все флажки при нажатии на div. Div и каждое радио имеют уникальный идентификатор. Div на самом деле представляет собой карты. Я хочу, нажав на карточку, как выбрать все перечисленные радио в div Как динамически получить все дочерние узлы из javascript, но проверить все радио
<div id=<?= ($counter-1) ?> class = "card categoryCard" style = "width: 18rem;">
<div class = "card-body">
<h5 class = "card-title"><?= $rows[$counter-1]["TICKETDESCRIPTION"]?></h5>
<input type = "radio" id=<?='TICKETDESCRIPTION'.($counter-1) ?> name = "TICKETDESCRIPTION" >
<p class = "card-text"><label>RM <?= $rows[$counter-1]["TICKETPRICE"]?></label></p>
<input type = "radio" id=<?='TICKETPRICE'.($counter-1) ?> name = "TICKETPRICE" >
</div>
</div>
Ниже мой код javascript
$('.categoryCard').click(function(){
var id = $(this).attr('id');
var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);
radiobtn.checked = true;
alert(id);
});
вы можете выбрать все радиокнопки с помощью 'input[type=radio]'
@AkhilAravind Да, но скажем, у меня есть 2 переключателя, он не выбирает все переключатели, когда я нажимаю на div
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
// assuming jquery
$('.categoryCard').click(function(e){
$('input[type = "radio"]', this).each( function( i) {
$(this).prop('checked', true);
});
});
Вы можете объяснить, что такое функция (i, el)?
Должен ли я для проверки использовать «атрибут» вместо «свойство»?
@MrJ Нет, он прав. Это потому, что я зацикливаю, и мне нужно сделать карты таким образом, чтобы у каждой карты был одинаковый переключатель, но разное значение.
на самом деле это было немного неправильно, см. обновление - но нет - prop - это правильный метод jquery, см. здесь: api.jquery.com/each
Можно объяснить, почему в $ ('input [type = "radio"]', this) есть "this"
в $ ('input [type = "radio"]', this) это ограничивает область поиска элементом .categoryCard. input [type = "radio"] - возвращает все переключатели в области видимости
Есть много способов реализовать то же самое. Я описал два способа.
You must not use the ID as duplicate.
ID is identifier for the elements, so it must not be duplicate.
$('.categoryCard').click(function(e){
$('input[type = "radio"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});
$('.categoryCard').click(function(e){
var id = $(this).attr('id');
$('input[data-details = "'+ id +'"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});.categoryCard{
border: 1px solid #d4d4d4;
padding: 5px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id = "1" class = "card categoryCard" style = "width: 18rem;">
<div class = "card-body">
<h5 class = "card-title">Desc</h5>
<input type = "radio" name = "TICKETDESCRIPTION">
<p class = "card-text">Price</p>
<input type = "radio" name = "TICKETPRICE" >
</div>
</div>
<!-- 2nd Method there must be no duplicate ID -->
<div id = "2" class = "card categoryCard" style = "width: 18rem;">
<div class = "card-body">
<h5 class = "card-title">Desc</h5>
<input type = "radio" name = "TICKETDESCRIPTION" data-details = "1">
<p class = "card-text">Price</p>
<input type = "radio" name = "TICKETPRICE" data-details = "1" >
</div>
</div>это поможет многим людям
Это также можно решить так: -
$('.categoryCard').click(function(){
$(this).find('input[type = "radio"]').each(function() {
$(this).prop('checked', true);
});
});
почему вы путаете jQuery с javascript? это не лучшая практика.
var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);его можно заменить наvar radiobtn = $("#TICKETDESCRIPTION"+id);