我將如何引用剛剛在Javascript中創建的特定html元素並獲取其值？

我的程序需要用戶輸入一個字符串和複選框，並建立一個列表來顯示。（基本檢查列表）每個列表元素由一個字符串變量和一個複選框輸入組成，但是如果說第三個將被勾選，我不能引用特定的複選框，因爲該方法中ID不是唯一的。我覺得好像有一個更好的方法。我是新來的StackOverflow，所以我道歉，如果代碼是太多了，少，混亂等我將如何引用剛剛在Javascript中創建的特定html元素並獲取其值？

相關代碼（IMO）：

var taskArr= []; //String of tasks array 
var compArr=[]; //comp = completed? task completion array, has bool 
var isCompleted = 0; 

document.getElementById('list').addEventListener('click',alternateValue); 

function alternateValue(){ 
    //Recheck all the actual clicked boxes and updates the array since the list members do not have a unique id. Another way? 

    alert("click works!"); 
    var newChecks = document.getElementsByClass(''); 
    //2nd alert, no alert. 
alert(newChecks[0].checked); 
    compArr = []; 
    for(i = 0; i<newChecks.length;i++){ 
     compArr.push(newChecks[i].checked); 
    } 
} 

function addTask(){ 
    var check = document.getElementById('compInput').checked; 
    var task = document.getElementById('taskInput').value; 
    taskArr.push(task); 
    compArr.push(check); 
    alert(check); 
    //Check for correct value of.. the check 
    update(); 
} 

function update(){ 
    var tasks = '<ul>'; 
    for(i =0; i< taskArr.length;i++){ 
     if(compArr[i] == 0){ 
      tasks = tasks.concat('<li>'+taskArr[i]+'<input type="checkbox" class="texts" placeholder="Done?"/></li>'); 

     } 
     else{ 
      tasks = tasks.concat('<li>'+taskArr[i]+'<input type="checkbox" class="texts" checked placeholder="Done?"/></li>'); 
     } 
    } 
    tasks = tasks.concat('</ul>');  
    document.getElementById('list').innerHTML = tasks; 
    document.getElementById('comps').addEventListener('click',alternateValue); 
}

來源

2015-06-14 Jorge Nicasio

我已經更新了我的答案對於純JavaScript方式 –

而不是指他們id's你可以參考的複選框他們使用的類，你給他們class="texts"

HTML：

<input class="texts" type="checkbox" value="a"/>A 
<input class="texts" type="checkbox" value="b"/>B 
<input class="texts" type="checkbox" value="c"/>C

使用只有JavaScript：JavaScript demo

如果你想要一個純JavaScript的解決方案，那麼你需要創建一個事件處理程序，處理與class="texts"複選框的事件。一旦事件被創建，你可以通過附加一個函數來使用它，並在函數中執行所需的操作。

<script> 
    var classname = document.getElementsByClassName("texts"); 
    for (var i = 0; i < classname.length; i++) { 
     classname[i].addEventListener('click', myFunction); 
    } 

    function myFunction(e) { 

     //accessing checked value of the textbox 
     var val = e.target.value; 
     alert(val); 

     //do whatever you want with "val" 

    } 
</script>

使用jQuery：jQuery demo

如果你想使用jQuery你可以寫下面的腳本，而不是以上的JavaScript。

$(document).ready(function(){ 
    $(".texts").change(function(){ 
     if(this.checked){ 
      alert($(this).val()); 
      //perform whatever you want to do on clicked checkbox 
     } 
    }); 
});

希望這有助於！

來源

2015-06-14 10:05:23

謝謝！我遇到了getElementsByClassName，但對其採用了一種完全奇怪的方法。 –

@JorgeNicasio很高興幫助，如果您認爲這有幫助，您可以接受答案:) –

哦！謝謝你告訴我！還有什麼我失蹤？ StackOverflow的，明智的。 –

我更喜歡.on over .change，因爲前者可以使用更少的內存並且可以用於動態添加的元素。

$(document).ready(function(){ 
    $(".texts").on('change',function(){ 
     if(this.checked){ 
      alert($(this).val()); 
      //perform whatever you want to do on clicked checkbox 
     } 
    }); 
});

Reference

來源

2015-06-14 10:25:01 sAcH

OP沒有指定jQuery作爲標記 –

我會記住這一點，因爲我還不是很熟練的Javascript。但是我將繼續使用JQuery！ –

我將如何引用剛剛在Javascript中創建的特定html元素並獲取其值？

回答

相關問題