如何在单击复选框按钮时制作单选按钮

How to make a radio button when a checkbox button clicked?

本文关键字：单选按钮 按钮 复选框 单击      更新时间：2024-02-21

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

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的复选框，然后取消选中。

您可能应该将其绑定到复选框的更改事件，然后执行：

$("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

这很容易，我将为您概述步骤-Fiddle-更新

//Get all checkboxes you want to monitor
var myCheckBoxesContainer = $('.checkboxes_container');
//Monitor the change event of these checkboxes
myCheckBoxesContainer.on('change', '.checkboxes', function(){
    var self = $(this), checked = self.is(':checked'), dataSplit = self.val().split('_');
    //code to create radio button
    if(checked){ 
        /* code goes here */ 
        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);
    }
    //code to delete the radio button
    else{ 
        /* delete code goes here */ 
        $('#div' + dataSplit[0]).remove();
    }
});

错误：

  • parent().remove()而不是parent.remove()，但为什么要删除div的父级而不是div
  • dataSplit1而不是dataSplit

注意，我使用点击而不是更改，因为有些浏览器在使用更改事件时对象失去焦点之前不会触发事件-然而，正如adeneo在评论中指出的那样，可能有一个tab/空格键触发器不会触发点击。。。

在OSX上的FX中测试这一假设，发现onclick和onchange是由空格键或鼠标触发的

$("input[type=checkbox]").click(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 for="'+dataSplit[0]+'" class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
    $("#result").append(result);
  }
  else {
    $('#div'+dataSplit[0]).remove();
  }
});

我认为你可以简化它：

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 { // Just use else here
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  // $('#div'+dataSplit1[0]).parent.remove(); should 
  $('#div'+dataSplit1[0]).remove(); 
}

is(':checked')返回布尔值true或false，无需将返回值与true或false:进行比较

if ($("input[type=checkbox]").is(':checked') { // if true
  // ...
} else { // if not true == false
  // ..
}

请注意，您的代码中有一个拼写错误parent应该是parent()。

不要使用"else-if"try-only"else"作为复选框，只能在未选中时选中。

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
{
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  $('#div'+dataSplit[0]).remove();
}
相关文章：