如何在新项目上向单选元素添加属性？

问题描述

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

我使用浏览器控制台（F12）进行了测试，以查看是否在单击的相应无线电输入上包含或不包含属性，但到目前为止没有成功。

如果我不添加check =“ =” checked“，则我的值未存储在sql表中。但是，如果我在浏览器控制台上手动添加“ checked =“ checked”，则在sql表上成功更新了我的值。

如何解决这种情况？

jsfiddle

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

解决方法

让我在这里澄清几件事，以便您实际学习一些东西：

1. 您正在编写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会单独为您完成此操作……而且注释中已明确指出。

1. 您要在页面加载时添加JS click事件监听器，它会在页面加载时创建元素列表。您将通过按钮添加更多的标签，它们将不会包含在该列表中。因此解决方案是将侦听器绑定到文档本身，并在单击它时将检查是否添加了选择器。

因此，请勿在刚加载的$("[name='s_radio']").on("click",function() {收音机为目标的情况下使用[name='s_radio']

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

因此，人们在单选按钮上没有问题，比如说收音机在某些人身上有问题。浏览器是您的朋友。您只需要学习使用它即可。

,

这应该可以解决问题

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