如何设置选中的单选按钮

Question

我的单选按钮已选中，但我希望它被onclicked，因为我有一个使用on.click函数的javascript函数

有可能的方法或例子吗？

<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();
    }
});

Answer 1

最好使用.is（）确定是否选中了复选框。

// 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();
});

演示

Answer 2

将事件更改为“更改”：

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

Answer 3

 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" : ""; ?>/> 

Answer 4

在我回答之前...请停止使用您的标签，只需使用：

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

现在可能的解决方案是：

 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>