不同組的複選框不工作在jquery

我更喜歡從特定的複選框組中取得複選框取決於我點擊了哪個按鈕，我用$('input[name="' + groupName + '"]:checked')。這將確保選中僅來自咖啡或動物複選框組的複選框。但它沒有按我的預期工作。不同組的複選框不工作在jquery

<body> 
    <div> 
     <input type="checkbox" value="Lion" name="animals" checked />Lion<br> 
     <input type="checkbox" value="Tiger" name="animals" />Tiger<br> 
     <input type="checkbox" value="Elephant" name="animals" />Elephant<br> 
     <input type="checkbox" value="Girafee" name="animals" />Girafee<br> 
     <input type="submit" id="__mainAnimals" /> 
     <br><br><br><br><br><br> 
     <input type="checkbox" value="Coffe" name="drinks" checked />Coffe<br> 
     <input type="checkbox" value="Tea" name="drinks" />Tea<br> 
     <input type="checkbox" value="Milk" name="drinks" />Milk<br> 
     <input type="checkbox" value="Mocha" name="drinks" />Mocha<br> 
     <input type="submit" id="__mainDrinks" /> 
    </div> 
    <div id="__DIVresult"></div> 


    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#__mainAnimals').click(function() { 
      getSelectedCheckBoxes('animals'); 
     }); 

     $('#__mainDrinks').click(function() { 
      getSelectedCheckBoxes('drinks'); 
     }); 

     var getSelectedCheckBoxes = function (groupName) { 
      var result = $('input[name="' + groupName + '"]:checked'); 
      if (result.length > 0) { 
       var resultString = result.length + " checkboxe(s) checked<br/>"; 
       result.each(function() { 
        resultString += $(this).val() + "<br/>"; 
       }); 
       $('__DIVresult').html(resultString); 
      } 
      else { 
       $('__DIVresult').html("No checkbox checked"); 
      } 
     }; 
    }); 

    </script> 

</body>

來源

2017-06-04 arrafat

歡迎來到stackoverflow @arrafat，如果任何答案可以幫助你[投它]（http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow），如果答案是你尋找未來讀者的標記爲[正確答案]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）。謝謝！ –

1 ID選擇是#所以$('__DIVresult')應該$('#__DIVresult')

第二屆一個ID應該開始與兼容性

使用除了ASCII字母和數字，字符的字母 '_'，' - '和'。'可能會導致兼容性問題，因爲它們在HTML 4中是不允許的。儘管此限制已在HTML 5,中解除，但ID應以兼容性爲的字母開頭。

REF：https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

第三屆一些小的更新，增加了兩個結果DIV，一個動物之一的飲料：

<hr> 
animals Result: 
<div id="DIVresultanimals"></div> 
<hr> 
drinks Result: 
<div id="DIVresultdrinks"></div>

然後用$('#DIVresult'+groupName).html(resultString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" value="Lion" name="animals" checked />Lion 
 
    <br> 
 
    <input type="checkbox" value="Tiger" name="animals" />Tiger 
 
    <br> 
 
    <input type="checkbox" value="Elephant" name="animals" />Elephant 
 
    <br> 
 
    <input type="checkbox" value="Girafee" name="animals" />Girafee 
 
    <br> 
 
    <input type="submit" id="mainAnimals" /> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <input type="checkbox" value="Coffe" name="drinks" checked />Coffe 
 
    <br> 
 
    <input type="checkbox" value="Tea" name="drinks" />Tea 
 
    <br> 
 
    <input type="checkbox" value="Milk" name="drinks" />Milk 
 
    <br> 
 
    <input type="checkbox" value="Mocha" name="drinks" />Mocha 
 
    <br> 
 
    <input type="submit" id="mainDrinks" /> 
 
</div> 
 
<hr> 
 
animals Result: 
 
<div id="DIVresultanimals"></div> 
 
<hr> 
 
drinks Result: 
 
<div id="DIVresultdrinks"></div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('#mainAnimals').click(function() { 
 
     getSelectedCheckBoxes('animals'); 
 
    }); 
 

 
    $('#mainDrinks').click(function() { 
 
     getSelectedCheckBoxes('drinks'); 
 
    }); 
 

 
    var getSelectedCheckBoxes = function(groupName) { 
 
     var result = $('input[name="' + groupName + '"]:checked'); 
 
     if (result.length > 0) { 
 
     var resultString = result.length + " checkboxe(s) checked<br/>"; 
 
     result.each(function() { 
 
      resultString += $(this).val() + "<br/>"; 
 
     }); 
 
     $('#DIVresult'+groupName).html(resultString); 
 
     } else { 
 
     $('#DIVresult'+groupName).html("No checkbox checked"); 
 
     } 
 
    }; 
 
    }); 
 
</script>

動態瞄準他們

來源

2017-06-04 02:24:13

在你的飲料和動物部分，你不會將兩者分開，所以當你使用點擊功能時，它不會區分兩個部分。一旦你將每一個添加到一個類，那麼該按鈕只會調用實際檢查過的選中項。

<html>

<form> 
    <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Lion" />Lion</br> 
     <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Tiger" />Tiger</br> 
     <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Elephant" />Elephant</br> 
     <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Girafee" />Girafee</br> 

    <input type="button" id="save_value" name="save_value" value="Save" /></br> 
     <textarea id="t"></textarea> 
     </form>

來源

2017-06-04 05:05:20

<script> 


    function updateTextArea() {   
var allVals = []; 
$('.ads_Checkbox:checked').each(function() { 
    allVals.push($(this).val()); 
}); 
$('#t').val(allVals);

}

$('#save_value').click(function(){ 
     $('.ads_Checkbox:checked').each(function(){ 
       updateTextArea(); 
     }); 
    });

這裏面合作我已經給每個動物命名並將它們放在一個班級中，以便我可以從一個數組中回憶它們。我希望這有助於。

來源

2017-06-04 05:09:29

不同組的複選框不工作在jquery

回答

相關問題