Question

我无法让这个工作！

当我检查第二个单选按钮时，会显示类名为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();
        }
    });
});

我使用this.checked尝试了.prop及以上的内容，但没有一个正在使用。

请帮助..

Answer 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 () {

虽然这是有效的，但在某些浏览器上，未触发＆＃34;未选中的＆＃34;无线电。所以你不能从这里捕捉到这个事件。如果你从更高的父母那里抓到，那就没关系。

Answer 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();
    }
});

Answer 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();
    }
});

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

3 个答案: