如何使用复选框同时实现不同的功能 JavaScript

Question

我对 JavaScript 很陌生，对 JavaScript、JQuery、Vanilla JavaScript 的语言有点困惑。我在一个 html 中有两个复选框，每个复选框都有两个不同的功能。我应该怎么做才能纠正这个功能？

HTML 代码：

<div class = "multianswer">
  <input type = "checkbox" name = "answercheck" id= "answercheck">
  <label for = "answercheck"> Show Answers </label>
</div>


<div class = "multifeature">
  <input type="checkbox"  name="featurescheck" id="featurescheck">
  <label for = "featurescheck"> Show More Features </label>
</div>

JavaScript 代码：

    $("input:checkbox").click(function(){
            $("input:checkbox:checked").click(function(){ 

//I think is some problem about this ***(function), because if I put 
// ".each(function)", all the checkbox and the function is working. And I 
//  have tried use checkbox id to identify each checkbox, but it is not 
//  working, don't understand why? 

                showAnswer()  //This is the one of the functions
            })
        })

    $("input:checkbox").click(function(){
            $("input:checkbox:checked").click(function(){  //same as above
                showMoreFeatures()  //This is another function
            })
        })

考虑我想要的最终效果，我认为有两个关键问题： 1. 如代码所示，如​​何使每个复选框发挥不同的功能。 2.这两个功能会在一个文本区域实现不同的效果，我希望这两个效果可以一起显示，不要相互覆盖。所以这就是我使用复选框的原因，但如何实现我仍然没有'不知道。

谢谢你的帮助~

补充信息：这是两个功能，但是我检查了之后，如果我想同时显示两个效果，我仍然认为问题不在这里

        function showAnswer(){
            var answerWords=$(".final .answer p").text();
            var text= $(".article p").text(); 
            var txt1 = answerWords;
            var txt2 = '<span style = "background-color:yellow">' + txt1 + '</span >'
            var reg = new RegExp(txt1,"g")
            text = text.replace(reg ,txt2)

            $(".article p").html(text) 

        };

        function showMoreFeatures(){
            var text= $(".article p").text(); 
            var qus = item2.question;
            var newCheckQus = new Array();
            var subQus= qus.substr(0,qus.length-1);
            var checkQus = subQus.split(" ");

            for(var i =0; i < checkQus.length; i++){
                if(except.indexOf(checkQus[i]) >-1){
                    continue    
                }else{
                    var txt2 = '<span style = "background-color:#2ECCFA">' + checkQus[i] + '</span >'
                    var reg = new RegExp(checkQus[i] ,"g")
                    text = text.replace(reg ,txt2)
                }   
                }

                $(".article p").html(text)
        }

Answer 1

您可以使用以下道具检查复选框是否选中 - 如果为 true，则执行代码

$("#featurescheck").change(function() {
    if($(this).prop('checked') == true) {
        //your code here;
    } else {
        //your code here
    }
});
$("#answeredcheck").change(function() {
    if($(this).prop('checked') == true) {
        //your code here;
    } else {
        //your code here
    }
});

Answer 2

您可以在一个事件中检查或取消选中复选框。使用单击事件而不是更改事件。

更新了Fiddle。

$(document).ready(function(){
$("input:checkbox").click(function() {
    if($(this).attr("id") === "answercheck"){
     if( $(this).attr("checked")){
      alert('answercheck checked');
    }
    else{
      alert('answercheck unchecked');
    }
    }
   if($(this).attr("id") === "featurescheck" ){
    if( $(this).attr("checked")){
      alert('featurescheck checked');
    }
    else{
      alert('featurescheck unchecked');
    }
    }
   });
});