當您檢查單選按鈕時觸發一個動作

Question

這裏是我的HTML，其中有兩個單選按鈕。默認選中的按鈕是「租賃」按鈕。

<input 
    id="quotation_request_payment_option_lease" 
    class="choose_payment_option" 
    name="quotation_request[payment_option]" 
    type="radio" 
    value="lease" 
    checked="checked"> 
    <input 
    id="quotation_request_payment_option_finance" 
    class="choose_payment_option" 
    name="quotation_request[payment_option]" 
    type="radio" 
    value="finance"> 

我想要做的是，當租賃按鈕被選中時，打印「租賃」到控制檯。當檢查「財務」時，打印「財務」到控制檯。 我試過各種東西都無濟於事。

這不起作用：

$(document).ready(function() { 
    $('input[type=radio[name='quotation_request[payment_option]']').change(function() { 
    if (this.value == 'lease') { 
     console.log("lease"); 
    } 
    else if (this.value == 'finance') { 
     console.log("finance"); 
    } 
}); 
}); 

Answer 1

你可以寫選定值直接控制檯。爲您的CSS選擇器使用單引號和雙引號的組合。

$("input[type=radio][name='quotation_request[payment_option]'").change(function() { 
 
    console.log($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked"> 
 
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" checked="checked">

Answer 2

$(document).ready(function() { 
 
    $(":radio[name='quotation_request[payment_option]']").change(function() { 
 
    if (this.value == 'lease') { 
 
     console.log("lease"); 
 
    } else if (this.value == 'finance') { 
 
     console.log("finance"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="lease" checked="checked"/> 
 
<input id="quotation_request_payment_option_finance" class="choose_payment_option" name="quotation_request[payment_option]" type="radio" value="finance" />

1. 像上面更改您的選擇。
2. 您可以使用:radio選擇單選按鈕

Answer 3

運行的代碼段在控制檯中看到

$('input[type=radio]').change(function() { 
 
console.log($(this).val()); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input 
 
    id="quotation_request_payment_option_lease" 
 
    class="choose_payment_option" 
 
    name="quotation_request[payment_option]" 
 
    type="radio" 
 
    value="lease" 
 
    checked="checked"> 
 
    <input 
 
    id="quotation_request_payment_option_finance" 
 
    class="choose_payment_option" 
 
    name="quotation_request[payment_option]" 
 
    type="radio" 
 
    value="finance" 
 
    checked="checked">

Answer 4

在HTML複選框更改添加以下觸發

onchange="myFunction(this)" 

，在我的功能

function myFunction(element) 
{ 
    //do stuff 
} 

這個怎麼樣

Answer 5

你的CSS選擇器是什麼原因造成的問題，請嘗試使用：

$("input[name='quotation_request[payment_option]']").change(function() { 
... 
} 

Answer 6

你的jQuery選擇是錯誤的。它應該是

$("input[type='radio'][name='quotation_request[payment_option]']").change(function(){  
    var value = $(this).val()  
    if(value == "lease") {  
     console.log(value);  
    } else if(value == "finance") {  
     console.log(value);  
    } 
});