jQuery: ":checked" always returns true

Question

 
 function WhichOneIsChecked(){
 var Item1 = ""; var Item2 = ""; var Item3 = "";
    if ($('input[type="checkbox"][name="gun"]:checked')) {
        Item1 = "مسدس";
    } if ($('input[type="checkbox"][name="phone"]:checked')) {
        Item2 = "هاتف";
    }
    if ($('input[type="checkbox"][name="car"]:checked')) {
        Item3 = "سيارة";
    }
    $("#p").html(Item1 + Item2 + Item3);
        
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="ml-1">سيارة</label>
                <input type="checkbox" name="car" />
                <label class="ml-1">هاتف</label>
                <input type="checkbox"  name="phone" />
                <label class="ml-1">مسدس</label>
                <input type="checkbox"  name="gun" />
                <p id="p"></p>
                <a onclick='WhichOneIsChecked()'> click me</a>

My Problem is that if i checked one check box . in javascript it gives me that all checkboxes are checked

 <label class="ml-1">سيارة</label>
        <input type="checkbox" name="car" />
        <label class="ml-1">هاتف</label>
        <input type="checkbox"  name="phone" />
        <label class="ml-1">مسدس</label>
        <input type="checkbox"  name="gun" />

   <script>var Item1 = ""; var Item2 = ""; var Item3= "";
    if ($('input[name="gun"]:checked')) {
        Item1 = "مسدس";
    } if ($('input[name="phone"]:checked')) {
        Item2 = "هاتف";
    }
    if ($('input[name="car"]:checked')) {
        Item3 = "سيارة";
    }
console.log(Item1 + Item2 + Item3);</script>

if i check only one of these three checkboxes ; in javascript it gives me that check boxes are checked

just use id for element then use if ($('#your_element').is(':checked')) { — Fatikhan Gasimov, Mar 06 '19 at 10:03
I believe this might be a duplicate - sufficient answers can be found here: https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery The comment above is one of them, also `$('#id_your_element').prop('checked')` should do — Erik Reder, Mar 06 '19 at 10:06
@ErikReder the one of id i and (is) have tried it before . i will try the (prop) and then answer you — Mark Dibeh, Mar 06 '19 at 10:08
A good way to see if checked in jQuery: `$(element).is(':checked')` — Roy Bogado, Mar 06 '19 at 10:16
`$('input[name="car"]:checked')` returns a jQuery **object**, even if the selector doesn't match anything. *Any* **object** cast to a Boolean (like in your if-condition) is always `true`. — connexo, Mar 06 '19 at 12:42

Fatikhan Gasimov · Answer 1 · 2019-03-06T10:09:56.100

1

Use id for every element then check with this : $('#phone').is(':checked')

        
        
         
 function WhichOneIsChecked(){
 var Item1 = ""; var Item2 = ""; var Item3= "";
            if ($('#gun').is(':checked')) {
                Item1 = "مسدس";
            } if ($('#phone').is(':checked')) {
                Item2 = "هاتف";
            }
            if ($('#car').is(':checked')) {
                Item3 = "سيارة";
            }
        console.log(Item1 + Item2 + Item3);
    $("#p").html(Item1 + Item2 + Item3);
        
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="ml-1">سيارة</label>
                <input type="checkbox" id="car" />
                <label class="ml-1">هاتف</label>
                <input type="checkbox"  id="phone" />
                <label class="ml-1">مسدس</label>
                <input type="checkbox"  id="gun" />
                
                 <p id="p"></p>
                <a onclick='WhichOneIsChecked()'> click me</a>

edited Mar 06 '19 at 10:09

answered Mar 06 '19 at 10:06

Fatikhan Gasimov

903
2
16
40

I have tried before this and it give me the same result – Mark Dibeh Mar 06 '19 at 10:07
@markdibe I added run code snippet for checking , please check with it – Fatikhan Gasimov Mar 06 '19 at 10:10
@markdibe probably you are doing something wrong. Because I tested it and it works – Fatikhan Gasimov Mar 06 '19 at 10:12
yea it works my problem is if i havent checked the first one m bu i checked the second it doesnt' work with me. – Mark Dibeh Mar 06 '19 at 10:27

Tanveer Hasan · Answer 2 · 2019-03-06T10:35:29.167

Use the same name in all option and use the desired function

<label class="ml-1">سيارة</label>
    <input type="checkbox" name="item" />
    <label class="ml-1">هاتف</label>
    <input type="checkbox"  name="item" />
    <label class="ml-1">مسدس</label>
    <input type="checkbox"  name="item" />
    <p id="p"></p>
    <a onclick='WhichOneIsChecked()'> click me</a>

     function WhichOneIsChecked(){
            var checklist="";
            $.each($("input[name='item']:checked"), function () {
                checklist+=($(this).val())+" ";
            });
            $("#p").html(checklist);       
        }

score 0 · Answer 3 · edited Mar 06 '19 at 12:40

0

Better option is to use prop() function.

edited Mar 06 '19 at 12:40

Nithya Rajan

4,722
19
30

answered Mar 06 '19 at 11:10

Ahsan Sajjad

34
1
9

1

your answer seems to be helpful, but it lacks formatting also explanation why it's better. We cannot just take your word for it. – Jean-François Fabre Mar 06 '19 at 11:34

score 0 · Answer 4 · answered Mar 06 '19 at 12:21

0

I believe this might be a duplicate - sufficient answers can be found here: stackoverflow.com/questions/901712/… From that,

 $('#id_your_element').prop('checked')

should do

answered Mar 06 '19 at 12:21

Erik Reder

303
3
14

jQuery: ":checked" always returns true

4 Answers4