Getting value data-toggle radio button

Question

I am having trouble getting the value from a Bootstrap radio button field with data-toggle="wizard-radio".

$('[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>

It can't get the value of radio button. Anyone any idea how to fix this?

can you add the html fragment containing the **wizard-card** class? — gaetanoM, Mar 04 '18 at 21:04
Your code is invalid in at least two ways: 1. `label` elements can not contain block level elements like `div`; 2. When I click Run code snippet, I immediately get an error. — Heretic Monkey, Mar 04 '18 at 21:06
Where is `.wizard-card`? And why are you searching for `[data-toggle="wizard-radio"]` again instead of using `this`? and why are you removing the `active` and then adding it again in the same code? And then you're doing the same to `radio`? Your code makes no sense. Also your HTML is invalid as the `label` tag cannot contain `div` as Mike mentioned. Explain what you're trying to do so we can help you. — Racil Hilan, Mar 04 '18 at 21:06
Thanks for the quick replies! I want to use images instead of radio buttons, that's why I added the . Did not know you can't use
then. The .wizard-card is in an upper
. I have no experience with javascript (only html and php) — Erik180486, Mar 04 '18 at 21:10
try `$('[data-toggle="wizard-radio"]')` to `$('input[type="radio"]')` — plonknimbuzz, Mar 04 '18 at 22:04
If this is NOT a duplicate, please edit your question to reflect what OTHER things you are having trouble with, as stated it is a duplicate. — Mark Schultheiss, May 26 '19 at 14:00

zer00ne · Answer 1 · 2018-03-05T15:08:11.887

I believe that you want to use Materials Icons with Bootstrap.

Place this in the <head> tag:

<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">

Place this before the closing </body> tag:

<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>

Use a minimum of 2 Materials special classes for Bootstrap per element (usually its an <i>)
```
<button type="button" class="btn btn-primary">
```
<i class="mdi mdi-home"></i>
```
</button>
```
Always use class .mdi and follow that with .mdi-* (*the name of icon)
There are some CSS rulesets that must be included as well. See the Demo.

The set of buttons are a slightly modified version of what you can find at Material Design Icons - Bootstrap. I wrote the radio button styles myself because the styles offered by MDI wasn't very versatile. The Unicode used in the content properties can be found in the stylesheet.

Most form controls have the value attribute available which can be set/get by the jQuery .val() method or the plain JavaScript property .value. While this holds true for the radio buttons, the <button> value is omitted from these particular <button>s to avoid repetition, so I opted to extract their text content instead with the jQuery .text() method or the plain JavaScript property .textContent.

Demo

// 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>

score 0 · Answer 2 · answered May 26 '19 at 13:50

0

Just try to get the value using active class like :

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

answered May 26 '19 at 13:50

Tarek Adra

500
5
12

Getting value data-toggle radio button

2 Answers2

Demo