从单选按钮获取价值

时间:2018-01-19 11:41:37

标签: javascript jquery html

我正在尝试制作多选无线电,但输出到控制台的是console = on。

这根本没有帮助。我需要知道选择哪个(无,t,i或ti)。

知道怎么做吗?

$('#btnSubmit').click(function() {
  var data = $('#containerCreationForm').serialize();
  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="containerCreationForm" method="post">
  <div class="content-form">
    <label class="col-sm-2 control-label">Console</label>
    <div class="col-sm-10">
      <div class="col-sm-5">
        <div class="radio radio-info">
          <input name="console" id="it" class="form-control" type="radio">
          <label for="it">Interactive &amp; TTY
                                                            <span class="text-blue">(-i -t)</span>
                                                        </label>
        </div>
        <div class="radio radio-info">
          <input name="console" id="tty" class="form-control" type="radio">
          <label for="tty">TTY
                                                            <span class="text-blue">(-t)</span>
                                                        </label>
        </div>
      </div>
      <div class="col-sm-5">
        <div class="radio radio-info">
          <input name="console" id="interactive" class="form-control" type="radio">
          <label for="interactive">Interactive
                                                            <span class="text-blue">(-i)</span>
                                                        </label>
        </div>
        <div class="radio radio-info">
          <input name="console" id="none" class="form-control" type="radio" checked="">
          <label for="none">None</label>
        </div>
      </div>
    </div>
    <button type="button" id="#btnSubmit">Submit</button>
  </div>
 

2 个答案:

答案 0 :(得分:0)

您需要使用名称和值来标识您的无线电的含义 例如

&#13;
&#13;
$(function() {
  $("form").submit(
    function(args) {
      args.preventDefault();
      console.log($(this).serialize());
    }
  );
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>Gender:</legend>
    Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
  </fieldset>
  <input type=submit>
</form>
&#13;
&#13;
&#13;

这将导致表格值为gender = m | f | Ø

还要注意你应该使用表单提交事件,因为这会调用当前代码绕过的表单验证逻辑

答案 1 :(得分:0)

在单选按钮中添加value属性。

实施例: 因为,您在代码中使用Jquery。我在这里使用它:

$(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });

    });

在HTML中:

<label><input type="radio" name="gender" value="male">Male</label> 
<label><input type="radio" name="gender" value="female">Female</label>

    <p><input type="button" value="Radio Value"></p>

希望它有帮助..!