如何设置选中的单选按钮被点击

时间:2017-05-25 06:40:54

标签: javascript html

我的单选按钮被选中,但我希望它被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();
    }
});

4 个答案:

答案 0 :(得分:2)

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

DEMO

答案 1 :(得分:0)

将事件更改为“更改”:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

在我回答之前...... 请停止试用您的标签,只需使用:

move_uploaded_file($_FILES['file']['tmp_name'], __DIR__.'/uploads/'. $_FILES["image"]['name']);

$file = "uploads/payables.csv";
$authorization = "Authorization: Bearer [some_token_key]";

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://example.org/api/v1/imports.json");
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_HTTPHEADER, [$authorization, 'Content-Type: text/csv']);
$cfile = new CurlFile($file,  'text/csv');
//curl file itself return the realpath with prefix of @
$data = array('data-binary' => $cfile);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$curl_response = curl_exec($curl);
curl_close($curl);

现在可能的解决方案是:

&#13;
&#13;
<label for="input_ID">text</label>
&#13;
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);
});
&#13;
&#13;
&#13;