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）としてマークしてください。ありがとうございました！ –

第一のidセレクタはそう$('__DIVresult')が$('#__DIVresult')

第二IDが '、 '_'、ASCII文字と数字以外の文字を使用して互換性のために、文字で

を開始すべきである必要があり#です - 'と'。 ' HTML 4では許可されていないため、互換性の問題が発生する可能性があります.HTML 5ではこの制限が解除されていますが、のIDは互換性の文字で始まる必要があります。

REF：次に$('#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>

で動的にそれらをターゲット

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

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

第三いくつかの小さなアップデートでは、2つの結果のdiv、ドリンク用の動物1対1に追加しました

出典

2017-06-04 02:24:13

あなたの飲み物と動物のセクションでは、2つの部分を分離していないので、クリック機能を使用するときは、トウセクションを区別しません。各クラスをクラスに追加すると、ボタンは実際にチェックされたチェック項目のみを呼び出します。この共内部

<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で異なるグループのチェックボックスが動作しない

答えて

関連する問題