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

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

$(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但都不是工作。

请帮助..

来源

2015-10-01 Meules

页面中只有2个“radio”吗？或者** [DEMO]（http://jsfiddle.net/Guruprasad_Rao/7h4q4wx1/7/）**会做什么？ –

我更新了你的提琴在这里：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(); 
     } 
    }); 
});

有2个问题：

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

这不是你如何得到一个属性的值jQuery的。如果你使用2个参数，这是一个setter，而不是一个getter。所以，你必须使用$(this).prop('checked')

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

虽然这是有效的，在某些浏览器，则不会触发针对“未选择的”广播change事件。所以你不能从这里赶上事件。如果你从一个更高的父母那里收到，那没关系。

来源

2015-10-01 12:44:05 Magus

好吧，这很有道理！我检查了你的更新小提琴，但似乎第三个和第四个电台被检查使他们消失！我只希望它们消失时，第一个广播被检查 – Meules

我编辑我的回应和小提琴 – Magus

你增加了'.first'作为classname ...错过了;）好的作品thx ..！ – Meules

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

来源

2015-10-01 12:46:26 Kriggs

当元件被取消的变化不会触发事件。见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(); 
    } 
});

来源

2015-10-01 12:54:27

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

回答

相关问题