【问题标题】:alert if any of radio buttons out of different sets of radio button is left out before button click如果在单击按钮之前遗漏了不同单选按钮集中的任何单选按钮,则发出警报
【发布时间】:2018-04-21 18:27:19
【问题描述】:

我有这个 jquery,它从不同的单选按钮集获取单选按钮输入。如果在单击按钮之前检查了这 3 个或未检查任何一个,我想提醒用户。 这是jquery:

 $("#query").click(function() {  

  $("#loading-div-background").show();
  $("#img").hide()
  $("#container").hide();

  var category = $('input:radio[name=category]:checked').val();
  var time = $('input:radio[name=time]:checked').val()
  var plotchoice = $('input:radio[name=plotchoice]:checked').val()
  var qu = {"category":category,"time":time,"plotchoice":plotchoice}
  $.ajax({
    type: "POST",
    async:true,
    contentType: "application/json; charset=utf-8",
    url: "/query",
    data: JSON.stringify(qu),
    success: function (data) {     
     var graph = $("#container");
     graph.html(data);   
     $("#loading-div-background").hide();      
     $("#container").show();
   },
   dataType: "html"
 });
});

这里是html:

 <label style="font-family: Comic Sans MS;">Choose a category:</label><br/>

    <!--set 1-->

<input type="radio" name="category" value="c1"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;">Status</label> </input>
&nbsp;
<input type="radio" name="category" value="c2"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;">Trend</label> </input><br>
<!-- sset 2-->
<br/>

<label style="font-family: Comic Sans MS;">Choose a time frame:</label><br/>
<input type="radio" name="time" value="t1"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;"> Recently</label> </input>
&nbsp;
<input type="radio" name="time" value="t2"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;"> Last 1 Week</label> </input>
&nbsp;
<input type="radio" name="time" value="t2"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;"> Last 1 Month</label> </input>
&nbsp;
<input type="radio" name="time" value="t2"><label style="margin-left: 10px;font-family: Comic Sans MS;; vertical-align: middle;"> Last 1 Year </label></input>
&nbsp;
<br/>
<br/>
<!--set 3-->

<label style="margin-left: 10px;font-family: Comic Sans MS;">Choose a plot type:</label><br/>
<input type="radio" name="plotchoice" value="p1"><label style="margin-left: 10px;font-family: Comic Sans MS;;  vertical-align: middle;"> Bar </label></input>
&nbsp;
<input type="radio" name="plotchoice" value="p2"><label style="margin-left: 10px;font-family: Comic Sans MS;;  vertical-align: middle;"> Line </label></input><br>
<br/>
<button type="button" id="query" style="font-family: Comic Sans MS;;  vertical-align: middle;">View Plot</button>

如您所见,我已经标记了 3 组单选按钮,在单击按钮之前需要从中选择每组单选按钮。如果其中任何一个被遗漏或没有选择,我想显示警告。 注意:jQuery 新手

感谢任何帮助。谢谢!!

【问题讨论】:

    标签: javascript jquery html radio-button


    【解决方案1】:

    可以像这样检查单选按钮的状态:

    $('button').click(function() {
      if ($('#radio').is(':checked')) { 
        console.log("Is checked"); 
      } else {
        console.log("Not checked");
      }
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-09-02
      • 2015-08-16
      • 2016-09-14
      • 1970-01-01
      • 1970-01-01
      • 2015-09-08
      • 1970-01-01
      相关资源
      最近更新 更多