javascript - 单击复选框按钮时如何制作单选按钮？

Question

如何在单击复选框按钮时制作单选按钮？另外，当复选框未选中时，如何删除单选按钮？

if($("input[type=checkbox]").is(':checked')==true) {
  var val = this.value;
  var dataSplit = val.split("_");
  var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen"
    name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+
    '" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
  $("#result").append(result);
}else if ($("input[type=checkbox]").is(':checked')==false){
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  $('#div'+dataSplit1[0]).parent.remove();
}

当我选中该复选框时，该代码有效，但当我取消选中该复选框时，该代码不起作用。当我取消选中时，单选按钮仍会添加。

注意:尝试选中 2/3 复选框，然后取消选中它们。

Answer 1

您可能应该将其绑定(bind)到复选框的更改事件，然后执行以下操作:

$("input[type=checkbox]").on('change', function() {
    var val = this.value;
    var dataSplit = val.split("_");
    if (this.checked) {
        var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen" name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+'" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
        $("#result").append(result);
    }else{
        $('#div'+dataSplit[0]).remove();
    }
});

FIDDLE