當該按鈕被選中時，將一個類添加到一個單選按鈕的父級（具有特定的類）

Question

當單擊單選按鈕時，我需要使用類“.add-class-here”添加一個 div 類（DOM 上的幾個元素）。

其中有三個，所以我還需要一種方法來確保僅更改該特定收音機的父 div。

我有以下代碼：

 $(document).ready(function() { $("input[type='radio']").click(function() { if (!$("input[type='radio']").val()) { console.log('Nothing is checked!'); return false; } else { $(".add-class-here").addClass("radio-checked"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-class-here"> <div class="radio1"> <label><input type="radio"> Radio button 1</label> </div> </div> <div class="add-class-here"> <div class="radio2"> <label><input type="radio"> Radio button 2</label> </div> </div> <div class="add-class-here"> <div class="radio3"> <label><input type="radio"> Radio button 3</label> </div> </div>

我嘗試了以下操作，但是這將類添加到所有 3 個元素中，類為 'add-class-here' 這也顯示兩次控制台日志消息

Answer 1

使用 jQuery closest方法。

$(".add-class-here").addClass("radio-checked")將類add-class-here到當前文檔中可用的add-class-here類的所有元素。

$(e.target).closest(".add-class-here").addClass("radio-checked")只會將類添加到最接近e.target元素的add-class-here元素（即單選按鈕已點擊）。

 $(document).ready(function() { $("input[type='radio']").click(function(e) { if (!$("input[type='radio']").val()) { console.log('Nothing is checked!'); return false; } else { // only the closest `add-class-here` element to the clicked radio button $(e.target).closest(".add-class-here").addClass("radio-checked"); } }); });

 .radio-checked { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-class-here"> <div class="radio1"> <label><input type="radio"> Radio button 1</label> </div> </div> <div class="add-class-here"> <div class="radio2"> <label><input type="radio"> Radio button 2</label> </div> </div> <div class="add-class-here"> <div class="radio3"> <label><input type="radio"> Radio button 3</label> </div> </div>

Answer 2

您可以使用parents()方法

 $(document).ready(function() { $("input[type='radio']").click(function() { if ($(this).prop('checked')) { $(this).parents('.add-class-here').addClass("radio-checked"); }else{ $(this).parents('.add-class-here').removeClass("radio-checked"); } }); });

 .radio-checked { color:blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-class-here"> <div class="radio1"> <label><input type="radio"> Radio button 1</label> </div> </div> <div class="add-class-here"> <div class="radio2"> <label><input type="radio"> Radio button 2</label> </div> </div> <div class="add-class-here"> <div class="radio3"> <label><input type="radio"> Radio button 3</label> </div> </div>

Answer 3

您可以使用以下代碼。

1. 首先通過為每個單選按鈕添加name來創建單選按鈕組，以便一次只能從單選按鈕組中選擇一個

2. 在單擊事件處理程序上，您無需檢查該值，因為每當您單擊單選按鈕時，它只會被選中，您無法取消選中它

3. 首先從所有 div 中刪除類，然后添加到所選收音機的父 div

 $(document).ready(function() { $("input[type='radio']").on('click', function() { //remove all classess $(".add-class-here").removeClass("radio-checked"); //add class to the parent of clicked radio button $(this).closest(".add-class-here").addClass("radio-checked"); }); });

 .radio-checked { background-color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-class-here"> <div class="radio1"> <label><input type="radio" name="radio-group"> Radio button 1</label> </div> </div> <div class="add-class-here"> <div class="radio2"> <label><input type="radio" name="radio-group"> Radio button 2</label> </div> </div> <div class="add-class-here"> <div class="radio3"> <label><input type="radio" name="radio-group"> Radio button 3</label> </div> </div>

Answer 4

檢查這個。 將 name 屬性添加到 radio 元素。 如果存在值，則在更改時使用選擇器添加類。

 $(document).ready(function() { $("input[type='radio']").click(function(event) { $(".add-class-here").removeClass("radio-checked"); if (!this.value) { console.log('Nothing is checked!'); return false; } else { event.target.closest('div[class^="add-class-here"]').className += " radio-checked"; } }); });

 .radio-checked { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="add-class-here"> <div class="radio1"> <label><input type="radio" value="1" name="radioitem"> Radio button 1</label> </div> </div> <div class="add-class-here"> <div class="radio2"> <label><input type="radio" value="2" name="radioitem"> Radio button 2</label> </div> </div> <div class="add-class-here"> <div class="radio3"> <label><input type="radio" value="3" name="radioitem"> Radio button 3</label> </div> </div>