JQuery 检查复选框并添加文本框名称

Question

大家好，我想做点什么。我想选中复选框并在同一个 div 文本框中添加名称。 我想要这个 js wordk all 复选框。

我的代码：

jQuery(document).ready(function () {

   if($(".checkbox").attr('checked')) {

      document.getElementById('text').setAttribute("name","imagename[]");
   } else {
       document.getElementById('text').setAttribute("name","");
   }


}); 

和php代码：

for ($i=0;$i < 50;$i++){
echo '<div class="container">'.'<img style="height:100px; width:100px;" src="'.$image[$i].'"><input type="checkbox" id="checkbox" class="checkbox" name="image[]" value="'.$image[$i].'"><input type="text" id="text" style="width: 100px;"></div>';
}

有什么建议吗？ 对不起我的英语不好。

任何人都可以展示这个例子吗？

    <form id="form_id"> 
<div class="select_all"><input type='checkbox' name='checkall' onclick='checkedAll(form_id);'></div>   
    <div class="container"><img style="height:100px; width:100px;" src="http://media-cache-ec0.pinimg.com/736x/54/c6/79/54c67918de386f6c279447b1588805e3.jpg"><input type="checkbox" id="checkbox0" class="checkbox" name="image[]" value="http://media-cache-ec0.pinimg.com/736x/54/c6/79/54c67918de386f6c279447b1588805e3.jpg"><input type="text" id="text" style="width: 100px;"></div>
        <div class="container"><img style="height:100px; width:100px;" src="http://media-cache-ak0.pinimg.com/736x/da/07/31/da07314554c2eb1bfc6db8e265058189.jpg"><input type="checkbox" id="checkbox1" class="checkbox" name="image[]" value="http://media-cache-ak0.pinimg.com/736x/da/07/31/da07314554c2eb1bfc6db8e265058189.jpg"><input type="text" id="text" style="width: 100px;"></div>
        <div class="container"><img style="height:100px; width:100px;" src="http://media-cache-ec0.pinimg.com/736x/6e/f1/af/6ef1afbe4a80e3a728cd58683e26487d.jpg"><input type="checkbox" id="checkbox2" class="checkbox" name="image[]" value="http://media-cache-ec0.pinimg.com/736x/6e/f1/af/6ef1afbe4a80e3a728cd58683e26487d.jpg"><input type="text" id="text" style="width: 100px;"></div>
        <div class="container"><img style="height:100px; width:100px;" src="http://media-cache-ec0.pinimg.com/736x/03/c9/17/03c917826ca4a7815cd6614330228b08.jpg"><input type="checkbox" id="checkbox3" class="checkbox" name="image[]" value="http://media-cache-ec0.pinimg.com/736x/03/c9/17/03c917826ca4a7815cd6614330228b08.jpg"><input type="text" id="text" style="width: 100px;"></div>
        <div class="container"><img style="height:100px; width:100px;" src="http://media-cache-ak0.pinimg.com/736x/af/9a/43/af9a43bdf2b446dcc8649ecfa800fc97.jpg"><input type="checkbox" id="checkbox4" class="checkbox" name="image[]" value="http://media-cache-ak0.pinimg.com/736x/af/9a/43/af9a43bdf2b446dcc8649ecfa800fc97.jpg"><input type="text" id="text" style="width: 100px;"></div>
    </form>

全选js：

    checked=false;
function checkedAll (form_id) {
    var aa= document.getElementById('form_id');
     if (checked == false)
          {checked = true}
        else
          {checked = false}
    for (var i =0; i < aa.elements.length; i++) 
    {aa.elements[i].checked = checked;}
      }

Answer 1

这是未经测试的，但我建议：

// binds an event handler for the change event:
$('.container input[type="checkbox"]').change(function(){
    // finds the input that follows the checkbox elements, sets the name to
    // the 'imagename[]' if it's checked, or to
    // an empty string if not checked
    $(this).next('input').prop('name', this.checked ? 'imagename[]' : '');
// triggers the change event
}).change();

但是，请注意您的 HTML 无效：id 在文档中必须是唯一的，除非这些输入元素需要 id其他原因，我强烈建议删除它们。否则，如 cmets 中所述，您应该在创建时将 $i 包含在 id 中。

参考资料：

• change()。
• next().
• prop()。
• val()。

Answer 2

JQuery 代码：

$(".checkbox").each(function(){
  $(this).siblings("input[type=text]")
    .attr("name", this.checked ? $(this).val() : "");
});

每个复选框都有一个匿名函数，函数内部this 指的是复选框本身。您可以将$(this).val() 替换为包含图像名称的名称，例如$(this).attr("name") 或$(this).siblings("img").attr("src")

Answer 3

$('.container').on('change', '.checkbox', function() {
   if(this.checked) {
     $('#text').attr("name","imagename[]");
   } else {
     $('#text').attr("name","");
   }
});