Работа с переключателями, передающими статус вместе со значением?

Question

Я пишу код для переключателей, где есть 3 переключателя, такие как ДА, НЕТ и ВСЕ. Я использую одно имя класса для всех 3, а также привязываю значение для них. Если пользователь нажимает на один из трех вариантов, могущих передать соответствующее значение в событии onclick, но моя проблема заключается в том, как узнать, нажимает ли пользователь на какую кнопку радиона среди трех кнопок, например, если пользователь нажимает кнопку «Все», которую я хочу выполнить какой-либо тип действия, если пользователь нажимает кнопку «Да», а затем какое-то другое действие и т. д., как узнать, как пользователь нажимает на какой переключатель? mycode ниже:

<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">All 
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">Yes 
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">No 

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

Answer 1

Пожалуйста, добавьте дополнительный параметр для хранения «идентификатор» в поле ввода, так же, как это:

<input type="radio" name="select_option" class="select_option" value="all" data-id="<?=$row_id;?>">All 
<input type="radio" name="select_option" class="select_option" value="yes" data-id="<?=$row_id;?>">Yes 
<input type="radio" name="select_option" class="select_option" value="no" data-id="<?=$row_id;?>">No 

Теперь, вот скрипт, который будет выполняться после проверки переключатель:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.select_option').click(function() { 
     if ($(this).prop('checked')) { 
      var id = $(this).data('id'); 
      var value = $(this).val(); 
     } 
     alert(value); 
    }); 
}); 
</script> 

Надеюсь, это может быть полезно для вас.

Answer 2

попробовать это

$(".select_option").change(function(){ 
     var radioValue = $("input[name='select_option']:checked").val(); 
     if(radioValue){ 
      alert("Your are clicked - " + radioValue); 
     } 
    }); 

Answer 3

$(".select_option").change(function() { 
    if ($(this).is(":checked")) { 
     var value = $(this).val(); 
     console.log(value); 
    } 
}); 

fiddle

Answer 4

Я добавил свои имена классов (все, да, нет) в этих HTML элементов

<input type="radio" name="select_option" class="select_option all" value="<?=$row_id;?>">All 
<input type="radio" name="select_option" class="select_option yes" value="<?=$row_id;?>">Yes 
<input type="radio" name="select_option" class="select_option no" value="<?=$row_id;?>">No 

Использование JQuery

$(document).ready(function(){ 
    $("input:radio").click(function(e){ 

     if($(this).hasClass("all")) 
     { 
       console.log("which button -> all"); 
       console.log("value="+$(this).val()); 
     } 
     else if($(this).hasClass("yes")) 
     { 
       console.log("which button -> yes"); 
       console.log("value="+$(this).val()); 
     } 
     else if($(this).hasClass("no")) 
     { 
       console.log("which button -> no"); 
       console.log("value="+$(this).val()); 
     } 
    }); 
}); 

FIDDLE