用動態收音機顯示/隱藏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不起作用

回答

相關問題