无法将 RadioButton 与 JQuery 一起使用 - 不会弹出警报答案

【问题标题】：Unable to use RadioButton with JQuery - Alert doesn't pop up无法将 RadioButton 与 JQuery 一起使用 - 不会弹出警报
【发布时间】：2017-06-06 00:24:52
【问题描述】：

我有两个单选按钮，我想在其中一个被选中时显示一个警报，似乎问题是它无法识别元素，因为警报没有弹出！

这段代码过去可以工作，但现在不行了（我想我更改了其中一个元素的 ID，这就是导致问题的原因）

JS：

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
});
/*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

$("form input:radio").change(function() {
    if ($(this).val() == "Yes") {
        document.getElementById("recordType").value = "01220000000FdvyAAC";
        alert("Yes");

    } else {
        document.getElementById("recordType").value = "01220000000FffjAAC";
        console.log(document.getElementById("recordType").value);
        alert("No");
    }
});

HTML

    <form method='post' id='prechatForm' autocomplete="on">
        <div id="bankEmployeeYesNoRadioButtonDiv">
          <label>{!$Label.Bank_Employee}</label><br/>
          <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
          <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
          <label for="radio-2" class="radioLabel">{!$Label.No}</label>
          <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
        </div>
</form>

结果：当我单击单选按钮时，没有任何反应，没有警报。没有控制台错误注意：请注意，我使用的是 Salesforce (Visualforce) 语法。

【问题讨论】：

您遇到什么错误？此外，输入是自动关闭的。没有</input>。最后，您的示例没有 <form> 元素或 ID 为 recordType 的元素。如果你使用 jQuery，那么 use jQuery。这个$("#recordType").val() 不是document.getElementById("recordType").value
尝试把这个 $("form input:radio").change(function() 改成这个 $("form input[type = 'radio']").change(function()跨度>
@j08691 ,1) 没有显示警报 2) 这是 Salesforce (visualforce) 语法，这就是我必须使用关闭元素的原因。3) 抱歉，这只是一个 sn-p，而不是完整代码4) 我会试试你最后的建议

标签： jquery html radio-button

【解决方案1】：

改变这个：

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
});
/*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

$("form input:radio").change(function() {
    if ($(this).val() == "Yes") {
        document.getElementById("recordType").value = "01220000000FdvyAAC";
        alert("Yes");

    } else {
        document.getElementById("recordType").value = "01220000000FffjAAC";
        console.log(document.getElementById("recordType").value);
        alert("No");
    }
});

到这里：

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
    /*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

    $("form input:radio").change(function() {
        if ($(this).val() == "Yes") {
            document.getElementById("recordType").value = "01220000000FdvyAAC";
            alert("Yes");

        } else {
            document.getElementById("recordType").value = "01220000000FffjAAC";
            console.log(document.getElementById("recordType").value);
            alert("No");
        }
    });

});

【讨论】：

谢谢它的工作，虽然我不明白为什么我需要将 input:radio 选择器包装在 document.ready 方法中，如果我需要它在每次选择按钮时运行...
我在这里找到了答案：stackoverflow.com/questions/9657572/jquery-document-ready 我应该在添加更改事件之前等待 DOM 加载。

【解决方案2】：

你的 jquery 选择器是错误的，所以改变这个：

<div id="bankEmployeeYesNoRadioButtonDiv">
  <label>{!$Label.Bank_Employee}</label><br/>
  <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
  <label for="radio-2" class="radioLabel">{!$Label.No}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
</div>

到：

<form id="bankEmployeeYesNoRadioButtonDiv">
  <label>{!$Label.Bank_Employee}</label><br/>
  <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
  <label for="radio-2" class="radioLabel">{!$Label.No}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
</form>

【讨论】：

没用，它的作用相同（没有控制台错误，也没有弹出警报）

【解决方案3】：

你有很多错误......你试图在你的 js 中找到“表单”，但你的 HTML 中没有任何表单标签，你也没有带有这个 id 的标签：“recordType”。但是，您的警报很好:)

下一次，只需 F12（打开浏览器控制台）并阅读错误。

编辑：添加 JQuery UI

$("document").ready(function () {
    $(".r1").checkboxradio({
        icon: false
    });

    $(".r1").change(function () {
        if ($(this).val() == "Yes") {
            alert("Yes");
        } else {
            alert("No");
        }
    });
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <title>Test</title>
</head>

<body>
    <!-- Modal Register -->
    <div id="bankEmployeeYesNoRadioButtonDiv">
        <label>{!$Label.Bank_Employee}</label><br/>
        <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
        <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes" />
        <label for="radio-2" class="radioLabel">{!$Label.No}</label>
        <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No" />
    </div>
    <!--/ Modal Register -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="./script.js"></script>
</body>

</html>

【讨论】：

你删除了我脚本的一个非常重要的部分，我需要 JQuery 插件才能工作并且你评论它。
您提供的“修改”代码不能与 checkboxradio 一起使用
我编辑了我的答案，我不明白“checkboxradio”是 JQuery UI