jquery 如何隐藏单选按钮后面的文本

sgtfey8w 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(145)

对于我现在几乎工作，但唯一的事情是，当我隐藏项目item_35317时，我也希望隐藏其余的标签（Zelfde als bij 'Uw gegevens'和"Ander adres"）
注意：我不能改变HTML中的任何内容，我只能用JS或CSS来改变它
也许有人知道我该如何隐藏这一切

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

个字符

jquery

来源：https://stackoverflow.com/questions/77316666/how-can-i-hide-the-text-behind-the-radiobuttons

3条答案

按热度按时间

jgovgodb1#

将你称之为标签的东西 Package 在一个span中，并给予它们和实际的标签一个类，然后使用元素的上下文来更改标签。
我使用了一个自定义事件来处理事情的表面。当我有更多的时间时，我会添加更多的解释。
编辑：关于自定义事件，我随机选择调用hideShowMe。我传递此事件一些自定义值ref：https://api.jquery.com/trigger/
要通过这些：$(this).trigger('hideShowMe', [isTrue, $showAssociates, $hideAssociates]);然后在事件处理程序中使用它们：function(event, isTrue, $showAssociates, $hideAssociates)，这是一种方法;还有其他几种方法，例如元素或数据属性上的类。
然后我使用.toggle()，它传递了一个布尔值，当true时显示，当false时隐藏。然后，我在父“行”容器$showAssociates.closest('.mx_form_row').find('.toggle-label').toggle(isTrue);中找到标签，并根据布尔值切换它们。
注意我还做了一个初始的trigger()的变化事件，以设置显示的初始状态：

$("input[name='item_35174']:checked") // one element selector
.add("input[name='item_35317']:checked")  // .add() adds a second element selector
.trigger('change'); // trigger the change event

字符串
关于收集元素引用的两个选择器：

let $showAssociates = $("label[for=item_35317],input[type=radio][name=item_35317]");

型
实际上等同于

let $showAssociates = $("label[for=item_35317]")
    .add("input[type=radio][name=item_35317]");

型

// this wraps the text after the input in a span so we can better work with that.
$('.mx_form_input_option input').each(function() {
  $(this.nextSibling).wrap('<span class="toggle-label"></span>');
});

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

//custom event, add to anything we want to target
$("input[name='item_35174']")
  .add("input[name='item_35317']")
  .on('hideShowMe', function(event, isTrue, $showAssociates, $hideAssociates) {
    $showAssociates.toggle(isTrue);
    $hideAssociates.toggle(false);
    $showAssociates.closest('.mx_form_row').find('.toggle-label').toggle(isTrue);
  });

$("input[name='item_35174']").on('change', function() {
  const isTrue = this.value == "0";
  let $showAssociates = $("label[for=item_35317], input[type=radio][name=item_35317]");
  let $hideAssociates =
    $("label[for=item_35175], #item_35175")
    .add("label[for=item_35176], #item_35176")
    .add("label[for=item_35177], #item_35177");
  $(this).trigger('hideShowMe', [isTrue, $showAssociates, $hideAssociates]);
  $('input[type=radio][name=item_35317]:checked').trigger('change');
});

$("input[name='item_35317']").on('change', function() {
  const isTrue = this.value == "1";
  let $showAssociates = $("label[for=item_35175], input#item_35175")
    .add("label[for=item_35176], input#item_35176")
    .add("label[for=item_35177], input#item_35177");
  let $hideAssociates = $('idonotexist');
  $(this).trigger('hideShowMe', [isTrue, $showAssociates, $hideAssociates]);
});
$("input[name='item_35174']:checked")
  .add("input[name='item_35317']:checked")
  .trigger('change'); //trigger correct state onload

.toggle-label {
  border: solid #00ff00 1px;
}

<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="" />
  </div>
</div>

赞(0）回复(0）举报 11个月前

x759pob22#

<!DOCTYPE html>
<html>

<head>
    <title>Your Page Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <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="" />
        </div>
    </div>

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

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

            // Hide or show the labels "Zelfde als bij 'Uw gegevens'" and "Ander adres"
            if (isHidden) {
                $("label[for=item_35317], input[type=radio][name=item_35317]").next('.mx_form_input_option').hide();
            } else {
                $("label[for=item_35317], input[type=radio][name=item_35317]").next('.mx_form_input_option').show();
            }
        });

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

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

            // Hide or show the labels "Zelfde als bij 'Uw gegevens'" and "Ander adres"
            if (isHidden) {
                $("label[for=item_35317], input[type=radio][name=item_35317]").next('.mx_form_input_option').hide();
            } else {
                $("label[for=item_35317], input[type=radio][name=item_35317]").next('.mx_form_input_option').show();
            }
        });

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

</html>

字符串

赞(0）回复(0）举报 11个月前

vwkv1x7d3#

试试这个

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

个字符

赞(0）回复(0）举报 11个月前

我来回答

jquery 如何隐藏单选按钮后面的文本

3条答案

相关问题

热门标签

最新问答