使用动态收音机显示/隐藏 div 不起作用答案

【问题标题】：Show/hide div with dynamic radio doesn't work使用动态收音机显示/隐藏 div 不起作用
【发布时间】：2015-10-01 12:34:07
【问题描述】：

我不能让这个工作！

当我检查第二个单选按钮时，会显示类名为 wholesale-option 的 div。当我取消选中单选按钮时，不会隐藏 div。我做错了什么？？

见我的Fiddle

$(document).ready(function () {
    $('.gui-block-option:first').nextAll().addClass('wholesale-option');

    var newContainer = $('<div class="gui-spacer"></div><div class="gui-block-option"><div class="gui-field"><div class="gui-radio"><div class="tm-radio"><input type="radio" value="" name="shipment_method" id="gui-form-shipping-wholesale" class=""></div><label for="gui-form-shipping-wholesale">Ik wil graag bij mijn groothandel bestellen(Afhalen)</label></div><div class="gui-field-content"><p>text over bestellen bij groothandel</p></div></div></div>');


    $('#gui-form .gui-block-option:first').after(newContainer);
    $(".wholesale-option").hide();

    $("#gui-form-shipping-wholesale").change(function () {
        if ($(this).prop('checked', true)) {
            $(".wholesale-option").show();
        } else if ($(this).prop('checked', false)) {
            $(".wholesale-option").hide();
        }
    });
});

我用.prop 尝试了this.checked 及更高版本，但没有一个有效。

请帮忙..

【问题讨论】：

页面中会不会只有2个radio？或者这个 DEMO 可以吗？

标签： javascript jquery

【解决方案1】：

我在这里更新了你的小提琴：http://jsfiddle.net/7h4q4wx1/16/

$(document).ready(function () {
    $('.gui-block-option:first').nextAll().addClass('wholesale-option');

    var newContainer = $('<div class="gui-spacer"></div><div class="gui-block-option"><div class="gui-field"><div class="gui-radio"><div class="tm-radio"><input type="radio" value="" name="shipment_method" id="gui-form-shipping-wholesale" class=""></div><label for="gui-form-shipping-wholesale">Ik wil graag bij mijn groothandel bestellen(Afhalen)</label></div><div class="gui-field-content"><p>text over bestellen bij groothandel</p></div></div></div>');


    $('#gui-form .gui-block-option:first').after(newContainer);
    $(".wholesale-option").hide();

    $("#gui-form").change(function () {
        if ($('.first').prop('checked')) {
            $(".wholesale-option").hide();
        } else {
            $(".wholesale-option").show();
        }
    });
});

有两个问题：

$(this).prop('checked', true)

这不是您在 jQuery 中获取属性值的方式。如果你使用 2 个参数，这是一个 setter，而不是一个 getter。所以你必须使用$(this).prop('checked')

$("#gui-form-shipping-wholesale").change(function () {

虽然这是有效的，但在某些浏览器上，不会为“未选择”单选触发更改事件。所以你不能从这里捕捉到事件。如果你从更高的父母那里抓到，那没关系。

【讨论】：

好吧，这很有意义！我检查了您更新的小提琴，但检查时似乎第三和第四收音机使它们消失了！我只希望它们在检查第一个收音机时消失
您将.first 添加为类名...错过了；）好的，谢谢..！
那是因为| 不是 html id 中的有效字符。所以我不能用$('#...') 来检索第一台收音机。

【解决方案2】：

$(this).prop('checked', true) 没有比较任何东西，它将true 分配给this。比较你可以this.checked === true，纯Javascript更快，在这种情况下更干净。

您还应该将更改侦听器添加到组中的所有收音机，然后检查哪些已触发，这是一种选择：

$(':radio').change(function () {
    if (this.value === 'core|130218|272516') {
        $(".wholesale-option").hide();
    } else {
        $(".wholesale-option").show();
    }
});

【讨论】：

【解决方案3】：

取消选择元素时不会触发更改事件。见How to detect radio button deselect event?

另外，调用$(this).prop('checked', true) 是检查单选按钮，而不是仅仅读取其checked 属性。

一种解决方案是检测所有单选元素的变化，并明确检查是否选择了第一个元素。 http://jsfiddle.net/7h4q4wx1/14/

$("[name=shipment_method]").change(function () {
    if ($('#gui-form-shipping-wholesale').prop('checked')) {
        $(".wholesale-option").show();
    } else {
        $(".wholesale-option").hide();
    }
});

【讨论】：