Jquery - how can i hade the text behind the radio bulls

Smileface
October 18, 2023
105 views
0 votes
2 Answers

This is my html:

$("input[name=item_35174][value='1']").prop('checked', true);

$("input[name='item_35174']").change(function() {
  $("label[for=item_35317], input[type=radio][name=item_35317]").toggle(this.value == "0");
  $("label[for=item_35175], input#item_35175").hide();
  $("label[for=item_35176], input#item_35176").hide();
  $("label[for=item_35177], input#item_35177").hide();

});
$("input[name='item_35174']:checked").change(); //trigger correct state onload

$("input[name='item_35317']").change(function() {
  $("label[for=item_35175], input#item_35175").toggle(this.value == "1");
  $("label[for=item_35176], input#item_35176").toggle(this.value == "1");
  $("label[for=item_35177], input#item_35177").toggle(this.value == "1");
});
$("input[name='item_35317']:checked").change(); //trigger correct state onload

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mx_form_row">
  <label for="item_35174">Naar luchthaven brengen: *</label>
  <div class="mx_form_input">
    <div class="mx_form_input_option">
      <input type="radio" name="item_35174" value="0" /> Ja
    </div>
    <div class="mx_form_input_option">
      <input type="radio" name="item_35174" value="1" /> Nee
    </div>
  </div>
</div>
<div class="mx_form_label">Vul hier enkel de gegevens in van uw ophaaladres naar de luchthaven</div>
<div class="mx_form_spacer"></div>
<div class="mx_form_row">
  <label for="item_35317">Ophaaladres</label>
  <div class="mx_form_input">
    <div class="mx_form_input_option">
      <input type="radio" name="item_35317" value="0" /> Zelfde als bij 'Uw gegevens'
    </div>
    <div class="mx_form_input_option">
      <input type="radio" name="item_35317" value="1" /> Ander adres
    </div>
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35175">Adres</label>
  <div class="mx_form_input">
    <input type="text" name="item_35175" id="item_35175" value="" />
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35176">Postcode</label>
  <div class="mx_form_input">
    <input type="text" name="item_35176" id="item_35176" value="" />
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35177">Woonplaats</label>
  <div class="mx_form_input">
    <input type="text" name="item_35177" id="item_35177" value="" />

https://jsfiddle.net/cn24m5t8/

For what i have now its almost working, but the only thing is that when i hide Item: item_35317 i want also the rest of the label: "Zelfde als bij ‘Uw gegevens’" and "Ander adres"

I can nothing change in the html, i can only change it in the js or css.

Maybe some one know how i can hide this

Answers

When the radio buttons are hidden, the labels can be selected and hidden using JQuery

This code might work, try it:

    $("input[name=item_35174][value='1']").prop('checked', true);

$("input[name='item_35174']").change(function() {
    $("label[for=item_35317], input[type=radio][name=item_35317]").toggle(this.value == "0");
    $("label[for=item_35175], input#item_35175").toggle(this.value == "1");
    $("label[for=item_35176], input#item_35176").toggle(this.value == "1");
    $("label[for=item_35177], input#item_35177").toggle(this.value == "1");

    // Hide or show the labels "Zelfde als bij 'Uw gegevens'" and "Ander adres"
    if (this.value == "0") {
        $("label[for=item_35317], label[for=item_35317] + .mx_form_input_option").hide();
    } else {
        $("label[for=item_35317], label[for=item_35317] + .mx_form_input_option").show();
    }
});

$("input[name='item_35174']:checked").change(); //trigger correct state onload

$("input[name='item_35317']").change(function() {
    $("label[for=item_35175], input#item_35175").toggle(this.value == "1");
    $("label[for=item_35176], input#item_35176").toggle(this.value == "1");
    $("label[for=item_35177], input#item_35177").toggle(this.value == "1");

    // Hide or show the labels "Zelfde als bij 'Uw gegevens'" and "Ander adres"
    if (this.value == "0") {
        $("label[for=item_35317], label[for=item_35317] + .mx_form_input_option").hide();
    } else {
        $("label[for=item_35317], label[for=item_35317] + .mx_form_input_option").show();
    }
});

$("input[name='item_35317']:checked").change(); //trigger correct state onload

try this one

$("input[name='item_35174'][value='1']").prop('checked', true);

$("input[name='item_35174']").change(function() {
  $("label[for='item_35317'], input[type=radio][name='item_35317']").toggle(this.value == "0");
  $("label.hide-on-item-35317").hide(); // Hide labels with the "hide-on-item-35317" class
});

$("input[name='item_35174']:checked").change(); // Trigger correct state onload

$("input[name='item_35317']").change(function() {
  $("label[for='item_35175'], input#item_35175").toggle(this.value == "1");
  $("label[for='item_35176'], input#item_35176").toggle(this.value == "1");
  $("label[for='item_35177'], input#item_35177").toggle(this.value == "1");
  $("label.hide-on-item-35317").toggle(this.value == "1"); // Show labels with the "hide-on-item-35317" class
});

$("input[name='item_35317']:checked").change(); // Trigger correct state onload

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mx_form_row">
  <label for="item_35174">Naar luchthaven brengen: *</label>
  <div class="mx_form_input">
    <div class="mx_form_input_option">
      <input type="radio" name="item_35174" value="0" /> Ja
    </div>
    <div class="mx_form_input_option">
      <input type="radio" name="item_35174" value="1" /> Nee
    </div>
  </div>
</div>
<div class="mx_form_label">Vul hier enkel de gegevens in van uw ophaaladres naar de luchthaven</div>
<div class="mx_form_spacer"></div>
<div class="mx_form_row">
  <label for="item_35317">Ophaaladres</label>
  <div class="mx_form_input">
    <div class="mx_form_input_option">
      <input type="radio" name="item_35317" value="0" /> Zelfde als bij &#039;Uw gegevens&#039;
    </div>
    <div class="mx_form_input_option">
      <input type="radio" name="item_35317" value="1" /> Ander adres
    </div>
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35175">Adres</label>
  <div class="mx_form_input">
    <input type="text" name="item_35175" id="item_35175" value="" />
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35176">Postcode</label>
  <div class="mx_form_input">
    <input type="text" name="item_35176" id="item_35176" value="" />
  </div>
</div>
<div class="mx_form_row">
  <label for="item_35177">Woonplaats</label>
  <div class="mx_form_input">
    <input type="text" name="item_35177" id="item_35177" value="" />

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – how can i hade the text behind the radio bulls

Answers