获取值数据切换单选按钮

问题描述 投票：-1回答：1

我无法通过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>

它无法获得单选按钮的值。任何人都知道如何解决这个问题？

javascript jquery html
1个回答
0
投票

我相信你想使用带有Bootstrap的材料图标。

  1. 将其放在<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">
  2. 在关闭</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>
  3. 每个元素至少使用2个材质特殊类用于Bootstrap（通常是<i>） <button type="button" class="btn btn-primary"> <i class="mdi mdi-home"></i> </button> 始终使用类.mdi并使用.mdi-*（*图标的名称）
  4. 还必须包含一些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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.