请问下面JS代码中的$('#radio').click事件该怎么写?位置该怎么放,因为如下写的话,在新生成text和添加按钮中,我想要的是当点击添加按钮的时候只生成一个text和删除按钮,但因为总和radio点击事件发生冲突。
所以想问问下面JS代码该如何修改。php代码
<form name="userinfo" method="post" action="" enctype="multipart/form-data" onsubmit="return false;" >
<input type="hidden" name="user_seq" value="{user.user_seq}" />
<input type="hidden" name="has_user_login_id" value="{user.has_user_login_id}" />
<span class="bigtitle"><input type = "text" name="big_name" value="{survey.survey_title}"></span>
<div id="use_flag">
<input type="checkbox" name="use_flag" id="use_flag" value="">使用与否
</div>
<fieldset>
<legend>New info</legend>
<table class="formTable">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3" class="length"><input type="text" name="title[]" value="{survey.survey_item_title}" ></td>
</tr>
<tr>
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="textarea" name="select[]" value="textarea"> Textarea
<input type="radio" id="radio" name="select[]" value="radio"> radio button
<input type="radio" id="checkbox" name="select[]" value="checkbox"> checkbox
<br>
</td>
</tr>
</tbody>
</table>
<br>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>
</fieldset>
</form>JS 代码
(function($){
$(document).ready(function(){
$('#textarea').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
});
$('#radio').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
var tr_last = $('.formTable tbody tr td').eq(1);
if(tr_last.find('.btn_radio_opt').length < 1)
{
tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');
$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div>');
$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});
$('#checkbox').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
var tr_last = $('.formTable tbody tr td').eq(1);
if($(tr_last).find('.btn_checkbox_opt').length < 1)
{
$(tr_last).append('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_add" class="btn_checkbox_opt">添加</button></span>');
$('.btn_checkbox_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_del" class="btn_chk_del_opt">删除</button></span>');
$('.btn_chk_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});
var i = 0;
$('#add').click(function(){
i++;
if($('.formTable tbody tr').eq(0).find('input[type=text]').val() == "")
{
alert('请输入标题!');return;
}
else
{
if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
{
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone()); $('.formTable tbody tr').eq(1).find('input:radio').each(function(){
var oldname = $(this).attr("name").substr(0,8);
$(this).attr("name",oldname+i);
});
$('.formTable tbody tr').eq(0).find('input[type=checkbox]').attr("checked",false);
$('.formTable tbody tr').eq(0).find(':input[type=text]').val("");
$('.formTable tbody tr').eq(1).find(':input[type=text]').remove();
$('.formTable tbody tr').eq(1).find('.btn_radio_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_radio_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_chk_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_checkbox_opt').remove();
$('.formTable tbody tr').eq(1).find(':text[name="radio"]').remove();
$('.formTable tbody tr').eq(1).find(':text[name="checkbox"]').remove();
/***************************************************************************************************************/
$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">삭제</button></span></div>');
$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
$('.btn_checkbox_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_del" class="btn_chk_del_opt">삭제</button></span>');
$('.btn_chk_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
/***************************************************************************************************************/
}
else
{
alert('请输入内容格式');return;
}
}
});
$('#del').click(function(){
if($('.formTable tbody tr').find('input[type=checkbox]:checked').length < 1)
{
alert('请选择要删除的标题');return;
}
else
{
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().remove();
}
});
$('#popup>thead>tr>td>span>a.save').click(function(){
var frm = $('form[name=userinfo]');
var url = '/hr/survey/insert';
if($(frm).find(':hidden[name=user_seq]').val() > 0)
{
url = '/hr/survey/update';
}
$(frm).attr('action', url);
$(frm).submit();
});
});
})(jQuery);
所以想问问下面JS代码该如何修改。php代码
<form name="userinfo" method="post" action="" enctype="multipart/form-data" onsubmit="return false;" >
<input type="hidden" name="user_seq" value="{user.user_seq}" />
<input type="hidden" name="has_user_login_id" value="{user.has_user_login_id}" />
<span class="bigtitle"><input type = "text" name="big_name" value="{survey.survey_title}"></span>
<div id="use_flag">
<input type="checkbox" name="use_flag" id="use_flag" value="">使用与否
</div>
<fieldset>
<legend>New info</legend>
<table class="formTable">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3" class="length"><input type="text" name="title[]" value="{survey.survey_item_title}" ></td>
</tr>
<tr>
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="textarea" name="select[]" value="textarea"> Textarea
<input type="radio" id="radio" name="select[]" value="radio"> radio button
<input type="radio" id="checkbox" name="select[]" value="checkbox"> checkbox
<br>
</td>
</tr>
</tbody>
</table>
<br>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>
</fieldset>
</form>JS 代码
(function($){
$(document).ready(function(){
$('#textarea').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
});
$('#radio').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
var tr_last = $('.formTable tbody tr td').eq(1);
if(tr_last.find('.btn_radio_opt').length < 1)
{
tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');
$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div>');
$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});
$('#checkbox').click(function(){
$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();
var tr_last = $('.formTable tbody tr td').eq(1);
if($(tr_last).find('.btn_checkbox_opt').length < 1)
{
$(tr_last).append('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_add" class="btn_checkbox_opt">添加</button></span>');
$('.btn_checkbox_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_del" class="btn_chk_del_opt">删除</button></span>');
$('.btn_chk_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});
var i = 0;
$('#add').click(function(){
i++;
if($('.formTable tbody tr').eq(0).find('input[type=text]').val() == "")
{
alert('请输入标题!');return;
}
else
{
if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
{
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone()); $('.formTable tbody tr').eq(1).find('input:radio').each(function(){
var oldname = $(this).attr("name").substr(0,8);
$(this).attr("name",oldname+i);
});
$('.formTable tbody tr').eq(0).find('input[type=checkbox]').attr("checked",false);
$('.formTable tbody tr').eq(0).find(':input[type=text]').val("");
$('.formTable tbody tr').eq(1).find(':input[type=text]').remove();
$('.formTable tbody tr').eq(1).find('.btn_radio_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_radio_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_chk_del_opt').remove();
$('.formTable tbody tr').eq(1).find('.btn_checkbox_opt').remove();
$('.formTable tbody tr').eq(1).find(':text[name="radio"]').remove();
$('.formTable tbody tr').eq(1).find(':text[name="checkbox"]').remove();
/***************************************************************************************************************/
$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">삭제</button></span></div>');
$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
$('.btn_checkbox_opt').click(function(){
$(this).after('<span style="display:block;margin-top:5px"><input type="text" name="checkbox[]" value=""><button name="chk_btn_del" class="btn_chk_del_opt">삭제</button></span>');
$('.btn_chk_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
/***************************************************************************************************************/
}
else
{
alert('请输入内容格式');return;
}
}
});
$('#del').click(function(){
if($('.formTable tbody tr').find('input[type=checkbox]:checked').length < 1)
{
alert('请选择要删除的标题');return;
}
else
{
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().next().remove();
$('.formTable tbody tr').find('input[type=checkbox]:checked').parent().remove();
}
});
$('#popup>thead>tr>td>span>a.save').click(function(){
var frm = $('form[name=userinfo]');
var url = '/hr/survey/insert';
if($(frm).find(':hidden[name=user_seq]').val() > 0)
{
url = '/hr/survey/update';
}
$(frm).attr('action', url);
$(frm).submit();
});
});
})(jQuery);
解决方案 »
- 图片旋转
- js请教怎么处理图片
- |zyciis| panIFrame21_IFrame 我要用正则取出21,现在我写出了正则表达式,但JS语法要怎么写,panIFrame([\d]+)_I谢谢
- 求助: 关于伸缩屏广告js代码的问题
- 关于点击链接得到一组字符的问题!
- 关于用js实现表单提交的问题
- 大家帮帮忙啊,如何实现图片自右向左移动呢?
- ★★★★★JS的同步问题(以经典的生产者-消费者为例)
- 题目如下:共有三个下拉框,当第一个下拉框被选重之后,第二个下拉框中的选项随即确立,第三个下拉框中的选项根据第二个下拉框中的值也随
- 这种移动如何玩 100分,别看你玩了这么多年js了,这个你不一定会玩
- 分享: jQuery递归JSON所有子数据
- extjs报错,求指教
<table class="formTable">
<tbody>
<tr>
<th><input type="checkbox" name="title_idx[]" value="">{=_('标题')}</th>
<td colspan="3"><input type="text" name="title[]" value="" ></td>
</tr>
<tr>
<th>{=_('内容')}</th>
<td colspan="3">
<input type="radio" id="radio" name="select[]" value="radio"> radio button
<br>
</td>
</tr>
</tbody>
</table>
<br>
<div class="edit">
<button class="btn" id="add">继续</button>
<button class="btn" id="del">删除</button>
</div>JS 代码
(function($){
$(document).ready(function(){
$('#radio').click(function(){$(this).parent().find('input[type="text"]').remove();
$(this).parent().find('button').remove();var tr_last = $('.formTable tbody tr td').eq(1);
if(tr_last.find('.btn_radio_opt').length < 1)
{
tr_last.append('<span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_add" class="btn_radio_opt">添加</button></span>');$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> ');$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}
});var i = 0;
$('#add').click(function(){
i++;if($('.formTable tbody tr').eq(1).find('input[type=radio]:checked').length!= 0)
{
var tr_last = $('.formTable tbody tr:last');
$(tr_last).after($('.formTable tbody tr').eq(1).clone()).after($('.formTable tbody tr').eq(0).clone());$('.formTable tbody tr').eq(1).find('input:radio').each(function(){
var oldname = $(this).attr("name").substr(0,8);
$(this).attr("name",oldname+i);
});$('.formTable tbody tr').eq(0).find('input[type=checkbox]').attr("checked",false);
$('.formTable tbody tr').eq(0).find(':input[type=text]').val("");
$(".formTable tbody tr:eq(1)").find(":text, .btn_radio_opt, .btn_radio_del_opt, .btn_chk_del_opt, .btn_checkbox_opt, :text[name='radio[]'], :text[name='checkbox[]']").remove();$('.btn_radio_opt').click(function(){
$(this).after('<div class="radioid"><span style="display:block;margin-top:5px"><input type="text" name="radio[]" value=""><button name="radio_btn_del" class="btn_radio_del_opt">删除</button></span></div> ');$('.btn_radio_del_opt').click(function(){
$(this).prev().remove();
$(this).remove();
});
});
}