Bootstrap单选按钮:在提交表单上获取选定的值

2021/01/30 22:51 · jquery ·  · 0评论

我有下一个boostrap单选按钮:

<div class="btn-group" id="filterDay" data-toggle="buttons">
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="1">Monday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="2"> Tuesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="3"> Wednesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="4"> Thursday
       </label>
       <label class="btn btn-default blue">
          <input type="radio" class="toggle" value="5"> Friday
       </label>
       <label class="btn btn-default blue">
           <input type="radio" class="toggle" value="6"> Saturday
        </label>
       <label class="btn btn-default blue active">
           <input type="radio" class="toggle" value="0"> Sunday
       </label>
</div>

我试图在提交表单时获取活动按钮的值,而没有创建“ onclick”事件,只是从$('#filterDay')按钮组中获取活动按钮。应该很容易,但是我没有找到获取价值的方法。我尝试了几个例子,但是任何例子都可行。

有人可以帮忙吗?

谢谢!

更新:

这是html的“打印”代码:

<label class="btn btn-default blue">
   <input type="radio" class="toggle" value="6"> Saturday
</label>    
<label class="btn btn-default blue active">
        <input type="radio" class="toggle" value="0"> Sunday
</label>

当我单击按钮时,班级中的“活动”正在改变。

在表单提交处理程序中,使用:checked选择器

var filterDay = $('#filterDay input:radio:checked').val()

您应该设置一个通用的“名称”以标识表单:

<div class="btn-group" id="filterDay" data-toggle="buttons">
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="1">Monday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="2"> Tuesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="3"> Wednesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="4"> Thursday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="5"> Friday
   </label>
   <label class="btn btn-default blue">
       <input type="radio" class="toggle" name="toggle" value="6"> Saturday
    </label>
   <label class="btn btn-default blue active">
       <input type="radio" class="toggle" name="toggle" value="0"> Sunday
   </label>
</div>

为了获得价值,您可以像这样:

$('input[name=toggle]:checked').val()

试试看,它应该可以解决您的问题。

$( "input:checked" ).val()

您可以参考以下链接以了解更多详细信息:http :
//api.jquery.com/checked-selector/

代码中的一些逻辑问题...

<label class="btn btn-default blue active">
       <input type="radio" class="toggle" value="0"> Sunday
</label>

Label具有活动类,因此引导程序会将其显示为活动类,但未选中包含的输入单选,因此在纯html中未选中它。

正确的代码...

<label class="btn btn-default blue active">
       <input type="radio" checked="checked" class="toggle" value="0"> Sunday
</label>

使用jquery:选中的选择器链接

$('#radioButtonName').prop('checked')

这适用于

本文地址:http://jquery.askforanswer.com/bootstrapdanxuananniuzaitijiaobiaodanshanghuoquxuandingdezhi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!