获取值数据切换单选按钮[重复]

Posted 2023-03-05

技术标签:

【中文标题】获取值数据切换单选按钮[重复]【英文标题】：Getting value data-toggle radio button [duplicate] 【发布时间】：2018-08-12 12:20:38 【问题描述】：

我无法从带有 data-toggle="wizard-radio" 的 Bootstrap 单选按钮字段中获取值。

$('[data-toggle="wizard-radio"]').click(function() 
      wizard = $(this).closest('.wizard-card');
      wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
      $(this).addClass('active');
      $(wizard).find('[type="radio"]').removeAttr('checked');
      $(this).find('[type="radio"]').attr('checked', 'true');
);

<div class="col-sm-4 col-sm-offset-2">
  <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Selecteer deze optie als het een eengezinswoning betreft" name="mhb_type">
    <label>
    <input type="radio" value="House" name="mhb_type">
    <div class="icon">
       <i class="material-icons">home</i>
    </div>
    </label>
    <h6>Eengezinswoning</h6>
  </div>
</div>

它无法获取单选按钮的值。有人知道如何解决这个问题吗？

【问题讨论】：

你能添加包含 wizard-card 类的 html 片段吗？您的代码无效至少有两种情况： 1. label 元素不能包含像div 这样的块级元素； 2.当我点击Run code sn -p时，立即报错。 .wizard-card 在哪里？为什么要再次搜索[data-toggle="wizard-radio"] 而不是使用this？为什么要删除 active 然后在相同的代码中再次添加它？然后你对radio做同样的事情？你的代码没有意义。此外，您的 HTML 无效，因为 label 标记不能包含 div，正如 Mike 提到的那样。说明您要做什么，以便我们为您提供帮助。感谢您的快速回复！我想使用图像而不是单选按钮，这就是我添加的原因。那时不知道你不能使用。 .wizard-card 位于上方的中。我没有使用 javascript 的经验（只有 html 和 php）试试$('[data-toggle="wizard-radio"]')到$('input[type="radio"]') 【参考方案1】：

我相信您想在 Bootstrap 中使用材质图标。

把它放在<head>标签中：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet">

把它放在结束</body>标签之前：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

每个元素至少为 Bootstrap 使用 2 个材质特殊类（通常是 <i>）

<button type="button" class="btn btn-primary">

<i class="mdi mdi-home"></i>

</button>

始终使用 .mdi 类，然后使用 .mdi-*（*图标名称）

还必须包含一些 CSS 规则集。查看演示。

这组按钮是您可以在Material Design Icons - Bootstrap 找到的稍微修改的版本。我自己编写了单选按钮样式，因为 MDI 提供的样式不是很通用。 content 属性中使用的 Unicode 可以在 stylesheet 中找到。

大多数表单控件都有可用的值属性，可以通过jQuery .val() method 或plain JavaScript property .value 设置/获取。虽然这适用于单选按钮，但这些特定的 <button>s 中省略了 <button> 值以避免重复，因此我选择使用 jQuery .text() method 或 plain JavaScript property .textContent 提取它们的文本内容。

演示

// Any click on <button> or :radio button call getActive()
$('button, :radio').on('click', getActive);

function getActive(e) 
  // Define V
  var V = '';
  // If the clicked node is a <button>, get its text
  if (e.target.tagName === 'BUTTON') 
    V = $(this).text();
    /* Otherwise if the clicked node [type] is radio...
    || get its value
    */
   else if (e.target.type === 'radio') 
    V = $(this).val();
    // If neither <button> nor :radio then quit
   else 
    return;
  
  // Display value/text of clicked node
  $('#out').val(V);

.mdi::before 
  font-size: 24px;
  line-height: 14px;


.btn .mdi::before 
  position: relative;
  top: 4px;


.btn-xs .mdi::before 
  font-size: 18px;
  top: 3px;


.btn-sm .mdi::before 
  font-size: 18px;
  top: 3px;


.dropdown-menu .mdi 
  width: 18px;


.dropdown-menu .mdi::before 
  position: relative;
  top: 4px;
  left: -8px;


.nav .mdi::before 
  position: relative;
  top: 4px;


.navbar .navbar-toggle .mdi::before 
  position: relative;
  top: 4px;
  color: #FFF;


.breadcrumb .mdi::before 
  position: relative;
  top: 4px;


.breadcrumb a:hover 
  text-decoration: none;


.breadcrumb a:hover span 
  text-decoration: underline;


.alert .mdi::before 
  position: relative;
  top: 4px;
  margin-right: 2px;


.input-group-addon .mdi::before 
  position: relative;
  top: 3px;


.navbar-brand .mdi::before 
  position: relative;
  top: 2px;
  margin-right: 2px;


.list-group-item .mdi::before 
  position: relative;
  top: 3px;
  left: -3px



/* Radio */

input,
label 
  font: inherit;
  font-weight: 900


.rad 
  display: none;


label 
  display: inline-block;
  width: 100%;
  height: 100%;


#off,
#on,
#stand,
#kick 
  display: none


#on::before 
  font-family: "Material Design Icons";
  content: '\F521';


#kick::before 
  font-family: "Material Design Icons";
  content: "\F82B";


#on::after 
  font-family: "Segoe UI Symbol";
  content: '\a0ON';


#kick::after 
  font-family: "Segoe UI Symbol";
  content: '\a0KIA!';


#on,
#kick 
  display: inline-block;


#off::before 
  font-family: "Material Design Icons";
  content: '\F522';


#stand::before 
  font-family: "Material Design Icons";
  content: '\F64B';


#off::after 
  font-family: "Segoe UI Symbol";
  content: '\a0OFF';


#stand::after 
  font-family: "Segoe UI Symbol";
  content: '\a0...';


#rad0:checked~#on,
#radA:checked~#kick 
  display: inline-block;


#rad0:checked~#off,
#radA:checked~#stand 
  display: none;


#rad1:checked~#off,
#radB:checked~#stand 
  display: inline-block;


#rad1:checked~#on,
#radB:checked~#kick 
  display: none;


#out 
  color: red;
  font-weight: 900;

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="//cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet">
</head>

<body>
  <main class='container'>
    <form id='UI'>
      <article class='row'>
        <section class="col-md-4 col-sm-offset-2">
          <fieldset class='form-group'>
            <legend class='group-label'>Bootstrap IV / Material-Design Icons</legend>
            <div class="btn-group">
              <button type="button" class="btn btn-primary">
    <i class="mdi mdi-home"> </i>Home
</button>
              <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <i class="mdi mdi-stack-overflow" title='SO'> </i>SO 
</button>
              <div class="dropdown-menu">
                <a class="mid dropdown-item" href="#">
                  <i class="mdi mdi-language-javascript active" title='JavaScript'>
            JavaScript</i>
                </a>
                <a class="mid dropdown-item" href="#">
                  <i class="mdi mdi-language-css3" title='CSS3'>
            CSS3</i>
                </a>
                <a class="mid dropdown-item" href="#">
                  <i class="mdi mdi-language-html5" title='HTML5'>
            HTML5</i>
                </a>
              </div>
              <button type="button" class="btn btn-success">
    <i class="mdi mdi-yin-yang"> </i>Balance
</button>
              <button type="button" class="btn btn-warning">
    <i class="mdi mdi-skull"> </i>BEWARE!
</button>
              <button type="button" class="btn btn-danger">
    <i class="mdi mdi-radioactive"> </i>DANGER!
</button>
            </div>
          </fieldset>
        </section>

        <section class='col-md-6'>
          <output id='out'></output>
        </section>

        <section class="col-md-6">
          <fieldset class='form-group'>
            <legend>RadioGroupList</legend>
            <div class='form-control'>
              <input type="radio" id="rad0" name="radGrp0" class="rad" value='on'>
              <input type="radio" id="rad1" name="radGrp0" class="rad" value='off' checked>
              <label id='off' for="rad0"></label>
              <label id='on' for="rad1"></label>
            </div>
            <div class='form-control'>
              <input type="radio" id="radA" name="radGrp1" class="rad" value='ATTACK!'>
              <input type="radio" id="radB" name="radGrp1" class="rad" value='Meditate' checked>
              <label id='stand' for="radA"></label>
              <label id='kick' for="radB"></label>
            </div>
          </fieldset>
        </section>
      </article>
    </form>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

【讨论】：

【参考方案2】：

尝试使用活动类获取值，例如：

$('.choice.active input').val()

【讨论】：

以上是关于获取值数据切换单选按钮[重复]的主要内容，如果未能解决你的问题，请参考以下文章

从单选按钮获取文本[重复]

动态单选按钮值不起作用[重复]

根据数据库更改单选按钮操作

使用 getElementsByName 获取选中的单选按钮值？ [复制]

OnChange 不适用于单选按钮 [重复]

如何更改单选按钮值[重复]