如何将属性添加到新项目的无线电元素？

Question

代码可以在已从 HTML 标记加载的第一个项目上添加属性 checked="checked"。但是，当我添加一个新的“item”单选元素时，代码不能包含属性 checked="checked"。为什么会这样？

我使用浏览器控制台 (F12) 进行了测试，以查看在单击的各个单选输入中是否包含属性，但到目前为止没有成功。

如果我不添加 checked="checked"，我的值不会存储在 sql table 上。但是，如果我手动添加 checked="checked"，在我的浏览器控制台上进行编辑，我的值将在 sql table.

上成功更新

我该如何解决这种情况？

<div id="p_scents">
<p>
<span class="custom_radio">
<input type="radio" id="featured-1" name="s_radio" value="1"> <label for="featured-1">item 1</label>
</span>
</p>    
</div>
<span id="add" class="btn btn-sm btn-primary">add</span>
<span id="remove" class="btn btn-sm btn-pub">remove</span>

var i = 1 ;
var scntDiv = $('#p_scents');
function add_track() {
  if(i < 30){       
  i++;  
  $('<p><span class="custom_radio"><input type="radio" id="featured-'+ i +'" name="s_radio" value="'+ i +'"> <label for="featured-'+ i +'">item '+ i +'</label></span></p>').appendTo(scntDiv);  
  }
}

function remove_track() {
  if(i > 1){            
  var select = document.getElementById('p_scents');
  select.removeChild(select.lastChild); 
  i--;
  }
}

document.getElementById('add').addEventListener('click', add_track, false);
document.getElementById('remove').addEventListener('click', remove_track, false);

$("[name='s_radio']").on("click", function() {
    $("[name='s_radio']").attr("checked", false);
    $(this).attr("checked", true);
});

Answer 1

这应该可以解决问题

$(document).on('click',"[name='s_radio']",function (e) {
    $("[name='s_radio']").attr("checked", false);
    $(this).attr("checked", true);
})

Answer 2

让我在这里澄清一些事情，以便您真正学到一些东西：

你正在为一些东西编写 JS 代码 HTML 单选按钮自己做的。如果你把相同的 name 属性放在你的案例 name="s_radio" 上，他们会自动取消选中其他人，只检查唯一被点击的人，他们只需要有相同的 name，而你已经做过某事。这称为分组输入：

示例：

var i = 1 ;
var scntDiv = $('#p_scents');
function add_track() {
  if(i < 30){       
  i++;  
  $('<p><span class="custom_radio"><input type="radio" id="featured-'+ i +'" name="s_radio" value="'+ i +'"> <label for="featured-'+ i +'">item '+ i +'</label></span></p>').appendTo(scntDiv);  
  }
}

function remove_track() {
  if(i > 1){            
  var select = document.getElementById('p_scents');
  select.removeChild(select.lastChild); 
  i--;
  }
}

document.getElementById('add').addEventListener('click', add_track, false);
document.getElementById('remove').addEventListener('click', remove_track, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p_scents">
<p>
<span class="custom_radio">
<input type="radio" id="featured-1" name="s_radio" value="1"> <label for="featured-1">item 1</label>
</span>
</p>    
</div>
<span id="add" class="btn btn-sm btn-primary">add</span>
<span id="remove" class="btn btn-sm btn-pub">remove</span>

所以你的 JS 代码是不必要的，因为 HTML 会为你一个人做这件事......并且在评论中明确说明。

您要在页面加载时添加 JS 单击事件侦听器，它会在页面加载时创建元素列表。您正在使用按钮添加更多它们，它们将不会包含在该列表中。因此解决方案是将侦听器绑定到文档本身，单击时它将检查所有添加了选择器的元素。

所以不要使用 $("[name='s_radio']").on("click", function() { 目标刚刚加载的 [name='s_radio'] 收音机

在您要绑定文档的地方使用 $("document").on("click", "[name='s_radio']", function() {，单击它会检查所有 [name='s_radio']，无论是新的还是旧的。通过新我谈论动态添加按钮。

所以人们对单选按钮没有问题，我说收音机对某些人来说有问题。浏览器是你的朋友。你只需要学会使用它。

如何将属性添加到新项目的无线电元素？

How add attribute to radio element on new items?

javascript

jquery

append

checked