Question

我对JavaScript很新鲜，对JavaScript，JQuery，Vanilla JavaScript的语言有点混淆。我在一个html中有两个复选框，每个复选框有两个不同的功能。我该怎么做才能纠正这个功能？

HTML code：

<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.这两个功能将在一个文本区域实现不同的效果，我希望这两个效果可以一起显示，不要被彼此覆盖。所以这就是我使用复选框的原因，但是如何实现这一点我仍然没有＆＃ 39;不知道。

感谢您的帮助〜

添加信息：这是两个功能，但在我检查之后，如果我想一起显示两个效果，我仍然不认为问题在这里

        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

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

$("#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

如果在一个单一事件中选中或取消选中复选框，则可以获取。使用click事件而不是change事件。

更新了 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');
    }
    }
   });
});

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

2 个答案: