how to set checked radio button is onclicked

Question

my radio button is checked but i want it is onclicked, because i have a javascript function that using on.click function

is there any posible method or examples?

<label style="margin-left:177px;">Order Type
<label style="color:red;">*</label>:</label>

<input style="margin-left:20px;" type="radio" id="orang" class="dua" name="ORDER_TYPE" value="NEW" required <?php echo ($result["ORDER_TYPE"] === "NEW")?"checked" : ""; ?>/>
<label style="padding-right:10px;">New Registration</label>

<input type="radio" id="kucinga" class="dua" name="ORDER_TYPE" value="UPGRADE/MIGRATE"  required <?php echo ($result["ORDER_TYPE"] === "UPGRADE/MIGRATE")?"checked" : ""; ?>/>
<label>Upgrade/Migrate Existing</label>

<input style="margin-left:10px;"type="radio" id="kucingb" name="ORDER_TYPE" value="VAS" class="dua" required <?php echo ($result["ORDER_TYPE"] === "VAS")?"checked" : ""; ?>/>

JS :

$('input[name="ORDER_TYPE"]').on('click', function() {
    if ($(this).val() == 'NEW') {
        $('#textboxes').show();
    } else {
        $('#textboxes').hide();
    }
});

im using this function but this function is work when user is clicked on radio button `$(function() { $('input[name="ORDER_TYPE"]').on('click', function() { if ($(this).val() == 'NEW') { $('#textboxes').show(); } else { $('#textboxes').hide(); } }); });` but in my coding above i only can checked the radio button and its show the radio button checked but the onclick function doesnt work — Lokman Hakim, May 25 '17 at 06:44
you code working good [`fiddle`](https://fiddle.jshell.net/ebe05ztu/) .`id=textboxes` is missing in your html — prasanth, May 25 '17 at 06:53
that id=textboxes is just to to hide my html input only i think it doesnt important to show it here its mean when the radio button is clicked there is show/hide function on those belonging that id but on my coding above its only checked not onlicked so the function doesnt work — Lokman Hakim, May 25 '17 at 06:57

daremachine · Accepted Answer · 2017-05-25T07:13:26.973

2

It's good to use .is() to determine if checkbox is checked.

// my hide logic function
$.fn.hideTextareaOrNot = function() {
    if($(this).is(':checked') && $(this).val() == 'NEW') {
    $('#textarea').hide();
  }
  else {
    $('#textarea').show();
  }
}

// on change listener
$('input[name="check"]').change(function() {
    $(this).hideTextareaOrNot();
});

// on page load init
$('input[name="check"]').each(function(v) {
    $(this).hideTextareaOrNot();
});

DEMO

edited May 25 '17 at 07:13

answered May 25 '17 at 07:01

daremachine

2,678
2
23
34

on ur coding above if u add checked the function doesnt work but anyway nice example – Lokman Hakim May 25 '17 at 07:05
yea ur coding is totally nice tysm – Lokman Hakim May 25 '17 at 07:20

DaFois · Answer 2 · 2017-05-25T07:03:22.577

0

Change the event to 'change':

$('input[name="ORDER_TYPE"]').on('change', function() { 
    if ($(this).val() == 'NEW') { 
        $('#textboxes').show(); 
    } else { 
        $('#textboxes').hide(); 
    } 
});

edited May 25 '17 at 07:03

answered May 25 '17 at 06:56

DaFois

2,197
8
26
43

score 0 · Answer 3 · answered May 25 '17 at 06:56

jQuery(".label").on('click', function(e){
  myFun();
})

function myFun(){
  console.log('Check console');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label style="margin-left:177px;">Order Type
                <label style="color:red;">*</label>:</label>

                <input style="margin-left:20px;" type="radio" id="orang" class="dua" name="ORDER_TYPE" value="NEW" required <?php echo ($result["ORDER_TYPE"] === "NEW")?"checked" : ""; ?>/>
                <label class="label" for="orang" style="padding-right:10px;">New Registration</label>

                <input type="radio" id="kucinga" class="dua" name="ORDER_TYPE" value="UPGRADE/MIGRATE"  required <?php echo ($result["ORDER_TYPE"] === "UPGRADE/MIGRATE")?"checked" : ""; ?>/>
                <label class="label" for="kucinga">Upgrade/Migrate Existing</label>

                <input style="margin-left:10px;"type="radio" id="kucingb" name="ORDER_TYPE" value="VAS" class="dua" required <?php echo ($result["ORDER_TYPE"] === "VAS")?"checked" : ""; ?>/>

sorry seem like ur coding im not understand can u explain it breifly — Lokman Hakim, May 25 '17 at 07:02

NightKn8 · Answer 4 · 2017-05-25T07:17:00.910

Before I will answer ... Please stop experimenting with your labels, simply use:

<label for="input_ID">text</label>

Now possible solution would be:

const allradios = Array.from(document.getElementsByClassName("dua"));
allradios.map((radio) => {
  radio.addEventListener('click', () => {
    console.log('ID of el:',radio.id, 'checked state:',radio.checked); //at this point you are able to detect what is clicked, you can tell now if (ID=="" && checked==true) { run my function }. Note that checked will be true here.
  }, false);
});

<input style="margin-left:20px;" type="radio" id="orang" class="dua" name="ORDER_TYPE" value="NEW">
<label for="orang">New Registration</label>

<input type="radio" id="kucinga" class="dua" name="ORDER_TYPE" value="UPGRADE/MIGRATE">
<label for="kucinga">Upgrade/Migrate Existing</label>

<input style="margin-left:10px;" type="radio" id="kucingb" name="ORDER_TYPE" value="VAS" class="dua">
<label for="kucingb">VAS</label>

how to set checked radio button is onclicked

4 Answers4