它应该相当简单。我正在尝试实现一个单选按钮组。当点击一个单选按钮时,它将在下面附加一个文本“测试”,当点击其他单选按钮时,第一个单选按钮上的文本将消失,第二个单选按钮将在其上添加文本。此外,还有一个按钮可动态添加单选按钮,并将更改事件添加到该单选按钮中。以下是我的代码:单选按钮更改事件无法正常启动
此代码的问题是,当我单击第二个单选按钮时,第一个单选按钮文本不会消失,并且当我检查第三个单选按钮时,第二个和第一个单选按钮文本不会不会消失。
我该如何解决?
function add() {
var cat_name = $('input.text').val();
$('div.radioGroup').append('<div><div><input type="radio" name="cat" value="' + cat_name + '"/> ' + cat_name + '<br /></div></div>');
var inputDOM = $('input[value="' + cat_name + '"]');
$('input:radio[name="cat"]').on('change', function() {
// alert(cat_name);
console.log("");
console.log(cat_name);
console.log(cat_name + " ischecked is " + $('input[value="' + cat_name + '"]').is(":checked"));
if ($('input[value="' + cat_name + '"]').is(":checked")) {
inputDOM.parent().after("<span style='margin-left:5em'>test</span><br>");
// alert("yes is working");
} else {
// alert("uncheck is working!");
console.log("uncheck is working");
inputDOM.parent().nextAll().remove();
}
});
$('input.text').val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="radioGroup">
</div>
<input type="text" name="text" class="text">
<button onclick="add()">Add</button>
我创建你应该有那么现在它是一个[MCVE] – mplungjan