Question

我有一组具有不同值的单选按钮，我正在尝试根据输入值调用函数。

HTML：

<form class="form">
 <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
   <label class="btn btn-info"  onclick="getChart()">
     <input name="chart" value="" type="radio">All
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="total" type="radio">Total
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="max" type="radio">Max
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="mean" type="radio">Mean
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="min" type="radio">Min
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="extrapolation" type="radio">Extrapolation
   </label>
 </div>
</form>

JS：

function getChart() {
    var startDate = $('#range').val().slice(0, 10) + 'T' + $('#range').val().slice(11, 16) + ':00+00:00';
    var endDate = $('#range').val().slice(19, 29) + 'T' + $('#range').val().slice(30, 38) + ':00+00:00';
    var appName = $('select[name=applicationSelect]').val();
    var envName = $('input[name=env]:checked').val();
    var chartType = $('input[name=chart]:checked').val();
    // Load chart
    ajaxLoadChart(startDate, endDate, appName, envName, chartType);
};

// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate, appName, envName, chartType) {
    // If no data is passed (the chart was cleared)
    if (!startDate || !endDate) {
        return;
    }
    // Otherwise, issue an AJAX request
    $.ajax({
        url: 'http://MyServlet.com',
        crossDomain: true,
        async: true,
        type: "GET",
        dataType: "json",
        data: {
            start: startDate,
            end: endDate,
            env: envName,
            app: appName,
            type: chartType
        },
        success: function (data) {
            defaultChart(data);
        }
        error: function(xhr, status, error) {
        alert(status + " " + error);
        console.log(xhr);
        }
    });
}

问题是在调用函数后设置所选输入的值，以便在Ajax请求中获取先前选择的值。

我是JS的新手，我可以在不对代码进行大量更改的情况下修复此问题吗？

Answer 1

将参数设置为函数

function getChart(param){
alert(param);
}

然后将其交给活动

<label class="btn btn-info" onclick="getChart(20)">
  <input name="chart" value="mean" type="radio">Mean
</label>
<label class="btn btn-info" onclick="getChart(25)">
  <input name="chart" value="mean" type="radio">Mean
</label>

它也可以是字符串值，只需给出事件的引用

<label class="btn btn-info" onclick="getChart('mean')">
  <input name="chart" value="mean" type="radio">Mean
</label>

它会将getChart的值显示为警报。对不起英语不好，我来自印度尼西亚的Erwin，希望这会对你有所帮助：D

Answer 2

这是因为你在标签上有onClick处理程序，而不是输入字段。

使用jQuery ala $（＆＃39; [type = input]＆＃39;）改变输入字段中的值也可能更容易.change（function（）{ //提取所有字段值并调用Ajax以检索新图表 }）;

Answer 3

如果不对现有代码进行重大更改，您应该在调用getChart之前简单地让事件传播。将getChart的函数名称更改为getChart_并创建一个新函数，如下所示：function getChart() { setTimeout(getChart_, 0); }。

我们在这里做的是安排原始getChart调用在事件处理程序执行后发生（并且输入的状态已更新）。

Answer 4

现在有了代码，每次点击都会执行两次函数 getChart ，因为input元素和label元素都会触发该事件。对于这两种情况，这些事件发生时检查的单选按钮是不同的。

但是你无论如何都想避免双重调用，因为你只想在必要时进行Ajax调用。

我建议做出这些改变：

首先从所有onclick代码中删除input属性;
将{em> getChart 函数包含在$('[name=chart]').change(...)中。这使它成为所有这些图表input的变更事件处理程序。

结果如下（可测试）：

$('[name=chart]').change(function getChart() {
    var chartType = $('input[name=chart]:checked').val();
    // just for testing:
    alert('Choice = ' + chartType);
    // rest of your getChart function follows here...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form"> 
    <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
        <label class="btn btn-info">
            <input name="chart" value="" type="radio">All
        </label>
        <label class="btn btn-info">
            <input name="chart" value="total" type="radio">Total
        </label>
        <label class="btn btn-info">
            <input name="chart" value="max" type="radio">Max
        </label>
        <label class="btn btn-info">
            <input name="chart" value="mean" type="radio">Mean
        </label>
        <label class="btn btn-info">
            <input name="chart" value="min" type="radio">Min
        </label>
        <label class="btn btn-info">
            <input name="chart" value="extrapolation" type="radio">Extrapolation
        </label>
    </div>
</form>

我保留了函数 getChart 的名称，但该函数可以是匿名的，因为它在这里使用。

在onClick事件之前设置输入值

4 个答案: