获取值数据切换单选按钮

时间：2018-03-04 20:58:16

标签： javascript jquery html

我无法通过data-toggle =＆＃34; wizard-radio＆＃34;从Bootstrap单选按钮字段获取值。

＆＃13;
＆＃13; 
$('[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');
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：0)

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

  1. 将其放在<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>

  2. 将其放在结束<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> 标记之前：

    <i>

  3. 每个元素至少使用2个材质特殊类进行Bootstrap（通常是<button type="button" class="btn btn-primary"> ）

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

    <强> </button> 

    .mdi

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

  4. 还必须包含一些CSS规则集。参见演示。

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

    大多数表单控件都有值属性，可以由jQuery .val() method或plain JavaScript property .value设置/获取。虽然这适用于单选按钮，但<button>这些特定的// 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); }值会被忽略，以避免重复，因此我选择使用jQuery .text() method或{plain JavaScript property .textContent来提取文本内容{3}}

    演示

    .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>
    var $seldom;
$(document).ready(function () {
    function chkdom() {
        if ($("#dropdomain").val() === 'Europa') {
            $seldom = '192.168.5.37';
        }
        else if ($("#dropdomain").val() === 'Canada') {
            $seldom = '172.16.0.1';
        }
    }
    chkdom();
    alert($seldom);
    alert($("#dropdomain").val());

    $('#search').click(function () {
            chkdom();
            $.ajax({
                url: "http://" + $seldom + "/api/find/" + $("input#user").val(),
                type: "GET",
                dataType: 'Jsonp',
                success: function (result) {....}

答案 1 :(得分：0)

只需尝试使用像这样的活动类来获取值：

$('.choice.active input').val()
相关问题
最新问题