2015-05-20 2 views
1

Результат, который я пытаюсь получить, если будут проверены первые два блока, будет 1 2, если будет проверено 3 ящика, результат будет равен 1 2 3. x появляется как неопределенный , Я предполагаю, что это связано с областью переменных, но даже если я рассматриваю x внутри входной функции, он показывает только один выбор за раз, но не расчесывает их.Я пытаюсь объединить строку во время цикла

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
function MLSNumbersSelected() 
{ 
    $("input:checkbox").each(function(){ 
     var $this = $(this);  
     if($this.is(":checked")){ 
     var x = x+" "+$this.attr("id"); 
     } 
    }); 
    alert(x); //should equal what is checked for example 1 or 1 2. 
} 
</script> 
</head> 

<body> 
    <p id="checkBoxes"> 
     <input type="checkbox" class="checkBoxClass" id="1" />1<br/> 
     <input type="checkbox" class="checkBoxClass" id="2" />2<br/> 
     <input type="checkbox" class="checkBoxClass" id="3" />3</p> 
    <p> 
      Check off some options then click button. 
     <input type="button" name="button" id="button" value="Click to Test" onClick="MLSNumbersSelected()"> 
    </p> 
</body> 

ответ

4

Вы определяете й каждый раз в цикле, вместо того, чтобы определить й раз и держать добавление к нему через петля. Например:

<script> 
    function MLSNumbersSelected() 
    { 
     var x; 
     $("input:checkbox").each(function(){ 
      var $this = $(this);  
      if($this.is(":checked")){ 
       x += " "+$this.attr("id"); 
      } 
     }); 
     alert(x); //should equal what is checked for example 1 or 1 2. 
    } 
    </script> 
1

Вы должны объявить x вне цикла .each(). Как теперь, она объявлена ​​внутри цикла .each(), а затем он выходит из области видимости до следующего обратного вызова вызывается, так что вы не можете накапливать это значение от одного обратного вызова к следующему:

function MLSNumbersSelected() { 
    var x = ""; 
    $("input:checkbox").each(function(){ 
     if (this.checked) { 
      x += " " + this.id; 
     } 
    }); 
    console.log(x); 
} 

FYI, я также удалил использование jQuery изнутри цикла, потому что это не обязательно, когда прямые свойства DOM дают вам все, что вам нужно.


Вы могли бы также позволить селектор сделать для вас работу, добавляя :checked к селектору поэтому выбирает только флажков, которые уже проверены. И, вы можете использовать .map() и .join() более легко создать список:

function MLSNumbersSelected() { 
    var x = $("input:checkbox:checked").map(function(){ 
     return this.id; 
    }).get().join(" "); 
    console.log(x); 
} 
1

Вы повторно инициализировать й в цикле. Это должно решить проблему:

function MLSNumbersSelected() 
{ 
    var x = '';  
    $("input:checkbox").each(function(){ 
     var $this = $(this);  
     if($this.is(":checked")){ 
     x = x+" "+$this.attr("id"); 
     } 
    }); 
    alert(x); 
} 
1

Используйте это, чтобы увидеть, если это добиться того, что вам нужно:

var inputs = $("input:checkbox"); 
inputs.each(function(i){ 
    if(inputs.eq(i).is(":checked")){ 
    x = x+" "+inputs.eq(i).attr("id"); 
    } 
}); 
1

$(function() { 
 
    $('#button').on('click', function() { 
 
     var x = $(':checkbox:checked').map(function() { 
 
      return this.id; 
 
     }) 
 
     .get().join(' '); 
 
     alert(x); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <p id="checkBoxes"> 
 
     <input type="checkbox" class="checkBoxClass" id="1" />1<br/> 
 
     <input type="checkbox" class="checkBoxClass" id="2" />2<br/> 
 
     <input type="checkbox" class="checkBoxClass" id="3" />3</p> 
 
    <p> 
 
      Check off some options then click button. 
 
     <input type="button" name="button" id="button" value="Click to Test"> 
 
    </p>

Смежные вопросы