jQuery循环的复选框

时间:2016-12-15 14:34:33

标签: jquery loops checkbox

目前我有两个输入字段,当我按下更新按钮并且我想添加更多输入时会自动更新...但问题是我必须手动在jquery脚本中添加输入字段名称。 我们可以为此添加任何循环吗?请帮忙!!

Type Comment: <input name="mainComment" type="text" value="" />
<input type="button" name="updateComment" value="Update" />

<hr />

<input type="checkbox" class="myCb" name="cb[1]" /><input type="text" name="inv[1]" value="" /><br />
<input type="checkbox" class="myCb" name="cb[2]" /><input type="text" name="inv[2]" value="" />


<script type="text/javascript">
    $(document).ready(function() {
        $("input[name='updateComment']").live("click", (function(){
            if($("input[name='cb[1]']").is(":checked")) {
                $("input[name='inv[1]']").val($("input[name='mainComment']").val());
            } else {
                $("input[name='inv[1]']").val("");
            }

            if($("input[name='cb[2]']").is(":checked")) {
                $("input[name='inv[2]']").val($("input[name='mainComment']").val());
            } else {
                $("input[name='inv[2]']").val("");
            }
        }));
    });
</script>

1 个答案:

答案 0 :(得分:1)

您可以使用输入class name.myCb)来选择DOM的输入,并使用jQuery的.each()方法循环遍历每个输入。< / p>

你可以这样做:

&#13;
&#13;
$(document).ready(function() {
        $("input[name='updateComment']").on("click", (function(){
        		var val = $("input[name='mainComment']").val();
            $('input.myCb').each(function(i) {
            	if($(this).is(':checked')) {
                $(this).next().val(val);
              } else {
                $(this).next().val('');
              }
            })
        		
        
        }));
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type Comment: <input name="mainComment" type="text" value="" />
<input type="button" name="updateComment" value="Update" />

<hr />

<input type="checkbox" class="myCb" name="cb[1]" /><input type="text" name="inv[1]" value="" /><br />
<input type="checkbox" class="myCb" name="cb[2]" /><input type="text" name="inv[2]" value="" /><br>
<input type="checkbox" class="myCb" name="cb[3]" /><input type="text" name="inv[2]" value="" />
&#13;
&#13;
&#13;

希望这有帮助!