javascript - Checking checkboxes are checked in an IF statement

I am currently having trouble making my IF statement work I want a user who selects shield "ely" and either selects textbox 3 or 4 would then automatically tick textbox 2.

This is my JavaScript code:

if(showShield.value == ("ely") && document.getElementById("cb3").checked = true; || document.getElementById("cb4").checked = true;)
    {
    document.getElementById("cb2").checked=true;
        }

This is probably wrong since it does not work so how would I be able to check is a user selects textbox 3 or 4.

Here is my HTML code:

<html>
<head>
<script type="text/javascript" src="myJavascript.js"></script>
</head>
<body>

<select id="likeShield" onchange="showTicks()">
<option value="select1">Select</option>
<option value="yesShield">Yes</option>
<option value="noShield">No</option>
</select>

<select id="showShield" onchange="showTicks()">
<option value="select1">Select</option>
<option value="arc">Arcane</option>
<option value="ely">Elysian</option>
<option value="spec">Spectral</option>
<option value="anylist">Choose any</option>
</select>

<table border = "1">
<tr>
   <th> tickbox </th>
   <th> shield parts </th>
   <th> description </th>
   <th> cost </th>
</tr>
<tr>
<td><input type="checkbox" id="cb1"></td>
   <td> arc sigil </td>
   <td> Large magic part </td>
   <td> 5m </td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"></td>
   <td> arc shield </td>
   <td> A extremely powerful magic shield </td>
   <td> 60m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb3"></td>
   <td> arc special item </td>
   <td> special element </td>
   <td> 10m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb4"></td>
   <td> elysian sigil  </td>
   <td> A sigil found by dragons </td>
   <td> 50m </td>
</tr>   
<tr>
   <td><input type="checkbox" id="cb5"></td>
   <td> elysian shield </td>
   <td> A extremely powerful ranging shield </td>
   <td> 40m </td>
</tr>   
<tr>
   <td><input type="checkbox" id="cb6"></td>
   <td> elysian special item </td>
   <td> A special attack attached to shield </td>
   <td> 25m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb7"></td>
   <td> spectral sigil  </td>
   <td> easily obtainable from goblins </td>
   <td> 4m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb8"></td>
   <td> spectral shield </td>
   <td> Impressive stats </td>
   <td> 15m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb9"></td>
   <td> spectral special item </td>
   <td> Does double damage </td>
   <td> 30m </td>
</tr>
</table>
</body>
</html>

I am currently having trouble making my IF statement work I want a user who selects shield "ely" and either selects textbox 3 or 4 would then automatically tick textbox 2.

This is my JavaScript code:

if(showShield.value == ("ely") && document.getElementById("cb3").checked = true; || document.getElementById("cb4").checked = true;)
    {
    document.getElementById("cb2").checked=true;
        }

This is probably wrong since it does not work so how would I be able to check is a user selects textbox 3 or 4.

Here is my HTML code:

<html>
<head>
<script type="text/javascript" src="myJavascript.js"></script>
</head>
<body>

<select id="likeShield" onchange="showTicks()">
<option value="select1">Select</option>
<option value="yesShield">Yes</option>
<option value="noShield">No</option>
</select>

<select id="showShield" onchange="showTicks()">
<option value="select1">Select</option>
<option value="arc">Arcane</option>
<option value="ely">Elysian</option>
<option value="spec">Spectral</option>
<option value="anylist">Choose any</option>
</select>

<table border = "1">
<tr>
   <th> tickbox </th>
   <th> shield parts </th>
   <th> description </th>
   <th> cost </th>
</tr>
<tr>
<td><input type="checkbox" id="cb1"></td>
   <td> arc sigil </td>
   <td> Large magic part </td>
   <td> 5m </td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"></td>
   <td> arc shield </td>
   <td> A extremely powerful magic shield </td>
   <td> 60m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb3"></td>
   <td> arc special item </td>
   <td> special element </td>
   <td> 10m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb4"></td>
   <td> elysian sigil  </td>
   <td> A sigil found by dragons </td>
   <td> 50m </td>
</tr>   
<tr>
   <td><input type="checkbox" id="cb5"></td>
   <td> elysian shield </td>
   <td> A extremely powerful ranging shield </td>
   <td> 40m </td>
</tr>   
<tr>
   <td><input type="checkbox" id="cb6"></td>
   <td> elysian special item </td>
   <td> A special attack attached to shield </td>
   <td> 25m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb7"></td>
   <td> spectral sigil  </td>
   <td> easily obtainable from goblins </td>
   <td> 4m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb8"></td>
   <td> spectral shield </td>
   <td> Impressive stats </td>
   <td> 15m </td>
</tr>
<tr>
   <td><input type="checkbox" id="cb9"></td>
   <td> spectral special item </td>
   <td> Does double damage </td>
   <td> 30m </td>
</tr>
</table>
</body>
</html>

Share Improve this question edited Aug 15, 2022 at 18:44 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 17, 2012 at 17:27 user1832254 211 gold badge1 silver badge3 bronze badges

Add a ment |

7 Answers 7

Sorted by: Reset to default 3

if(showShield.value == "ely" && (document.getElementById("cb3").checked || document.getElementById("cb4").checked))//parison
{
    document.getElementById("cb2").checked=true; //asignment
}

Operator Precedence: && is done before || so you need brackets
==, not = for parison (Preferably === which will not automatically convert types and do a strict parison)
; is a statement terminator and shouldn't be used in the middle of one.

if(showShield.value === "ely" && (document.getElementById("cb3").checked == true || document.getElementById("cb4").checked == true))

No need to use semicolon and use == instead of =. Also brackets are needed for condition.

There may be quite a bit wrong here (as you didn't provide too much information here), but at the very least, instead of

document.getElementById("checkBox3").checked = true;

You should have

document.getElementById("checkBox3").checked == true

The same goes for "checkBox4".

Here's a quick explanation why:

1) When you use one equal sign, you are setting a value. So instead of testing if checkBox3 is checked, you're essentially telling checkBox3 to bee checked. Using two equal signs is necessary for if statements, since it makes the statement a question instead of a mand.

2) Semicolons are only necessary at the end of a statement. Since the "if" line is one whole statement, you don't want semicolons inside of it.

Hope that makes sense!

Try this

if(ely.value == "ely" && (document.getElementById("checkBox3").checked ||
  document.getElementById("checkBox4").checked))
{
    document.getElementById("checkBox2").checked=true;
}

You would probably want:

if(ely.value == ("ely") && document.getElementById("checkBox3").checked == true || ely.value == ("ely") && document.getElementById("checkBox4").checked == true)
{
document.getElementById("checkBox2").checked=true;
    }

if(ely.value == ("ely") && (document.getElementById("checkBox3").checked == true || document.getElementById("checkBox4").checked == true))
{
document.getElementById("checkBox2").checked=true;
    }

It's because logical operators have their order of parison, just like arithmetical multiplication has its priority over addition. Well, I'm new to JS, but I believe it's how it works everywhere. Moreover you have to use double equality sign to pare, because single is used for assigning the value.

if(showShield.value == ("ely") && document.getElementById("cb3").checked = true; || document.getElementById("cb4").checked = true;)

showShield.value == ("ely") && document.getElementById("cb3").checked = true; js checked the condition as the showShield.value must be ely and cb3 is checked due to operator precedence then it checked the 'OR' statement cb4 is checked .

We can solve this by .

    if(showShield.value == ("ely") && (document.getElementById("cb3").checked = true; || document.getElementById("cb4").checked = true))

javascript checkbox if else condition

$checkbox = document.getElementById("checkBoxId").checked;

if($checkbox == true) {
    //check true
} else {
    //check false
}

jQuery checkbox if else condition

$checkbox = $("#checkBoxid").is(":checked");

if($checkbox == true) {
     //check true
} else {
     //check false
}

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743698092a4492098.html

javascript - Checking checkboxes are checked in an IF statement - Stack Overflow

7 Answers 7

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Checking checkboxes are checked in an IF statement - Stack Overflow

7 Answers 7

相关推荐