单击复选框按钮时如何制作单选按钮?还有,当取消选中复选框时,如何删除单选按钮?
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复选框,然后取消选中它们。
答案 0 :(得分: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();
}
});
答案 1 :(得分:1)
错误:
parent().remove()
不是parent.remove()
,但为什么要删除div的父级而不是div?dataSplit1
代替dataSplit
注意我使用点击而不是更改,因为在使用更改事件时对象失去焦点之前,某些浏览器不会触发事件 - 但是正如adeneo指出的那样评论,可能有一个标签/空格键触发器不会触发点击...
TESTING在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();
}
});
答案 2 :(得分:1)
这很简单,我将概述适合您的步骤 - Fiddle - Updated
//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();
}
});
答案 3 :(得分:0)
我认为你可以简化它:
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();
}
答案 4 :(得分:0)
不要使用“else if”,只能选中“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();
}
答案 5 :(得分:0)
is(':checked')
返回布尔值true
或false
,无需将返回值与true
或false
进行比较:
if ($("input[type=checkbox]").is(':checked') { // if true
// ...
} else { // if not true == false
// ..
}
请注意,您的代码parent
中应该有parent()
。