如果用戶選擇某些選項，則勾選復選框

Question

我有個問題。 我希望我的JavaScript文件能夠找到用戶是否選擇了“否”，而他們並不需要屏蔽，如果選擇了“弧”，則應勾選checkbox1。 “否”和“伊利”對勾復選框4同樣適用。 同樣，“否”和“規范”打勾復選框7。 但是，如果他們選擇“否”和“任何”，則可以選擇任何內容。 我該怎么做。

HTML代碼：

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

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

 <select id="chooseShield">
 <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>

我認為它是IF聲明，但我不知道如何實現它。

誰能幫我解決這個問題？

謝謝

拍。

編輯：

我的JavaScript if語句：

function showTicks(what)
{
if (what.value == ("noShield") && ("arc")) {
  if (what.value == ("noShield") && ("ely")) {
    if (what.value == ("noShield") && ("spec")) {
    document.getElementById("cb1").checked=true;
    document.getElementById("cb4").checked=true;
    document.getElementById("cb7").checked=true;
    }
else
  document.getElementById("cb7").checked=false;
  }
else
document.getElementById("cb4").checked=false;
 }
else
document.getElementById("cb1").checked=false;
}

Answer 1

使用jQuery ：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$("#likeShield").change(function() {
   if ($("#likeShield").val() == "yesShield") {
       if ($("#chooseShield").val() == "arc") {
          $("#cb1").prop("checked", true);
       } // etc
   }
})
</script>

這likeShield處理程序附加到likeShield select的change事件，因此，每當用戶在該下拉列表中更改選擇時，它都會運行附加函數。

Answer 2

我會使用jQuery。 結帳工作演示。

在更改事件中讀取所選值時，比較並設置checkox。

$(".conf").change(function() {
    tickBoxes();
})

function tickBoxes() {

    var likeShield = $("#likeShield").val();
    var chooseShield = $("#chooseShield").val();

    if (likeShield == 'noShield' && chooseShield == 'arc') {
        $("#cb1").prop('checked', true);
    }
}

Answer 3

但是要使此工作有效，您需要在html中添加一個表格，請參見鏈接： http : //jsbin.com/oyuxah/2/edit

var likeShield = document.getElementById('likeShield');
var chooseShield = document.getElementById('chooseShield');

function checkAll(){

  if(likeShield.value=="noShield" && chooseShield.value=="arc"){
     document.getElementById('cb1').checked =true;
     document.getElementById('cb2').checked =false;
     document.getElementById('cb3').checked =false;
     document.getElementById('cb4').checked =false;
     document.getElementById('cb5').checked =false;
     document.getElementById('cb6').checked =false;
     document.getElementById('cb7').checked =false;
  }

  if(likeShield.value=="noShield" && chooseShield.value=="ely"){
     document.getElementById('cb1').checked =false;
     document.getElementById('cb2').checked =false;
     document.getElementById('cb3').checked =false;
     document.getElementById('cb4').checked =true;
     document.getElementById('cb5').checked =false;
     document.getElementById('cb6').checked =false;
     document.getElementById('cb7').checked =false;
  }

  if(likeShield.value=="noShield" && chooseShield.value=="spec"){
     document.getElementById('cb1').checked =false;
     document.getElementById('cb2').checked =false;
     document.getElementById('cb3').checked =false;
     document.getElementById('cb4').checked =false;
     document.getElementById('cb5').checked =false;
     document.getElementById('cb6').checked =false;
     document.getElementById('cb7').checked =true;
   }
  if(likeShield.value=="noShield" && chooseShield.value=="anylist"){
     document.getElementById('cb1').checked =false;
     document.getElementById('cb2').checked =false;
     document.getElementById('cb3').checked =false;
     document.getElementById('cb4').checked =false;
     document.getElementById('cb5').checked =false;
     document.getElementById('cb6').checked =false;
     document.getElementById('cb7').checked =false;
   }

 }

Answer 4

您應該創建一個Javascript腳本（內聯與否），以便能夠修改/檢查DOM。

您的答案在這里： http : //docs.jquery.com/How_jQuery_Works

如果用戶選擇某些選項，則勾選復選框

問題描述

4 個解決方案

解決方案1
0 2012-11-16 15:18:50

解決方案2
0 2012-11-16 15:37:50

解決方案3
0 2012-11-16 16:09:08

解決方案4
-1 2012-11-16 15:20:18

如果用戶選擇某些選項，則勾選復選框

問題描述

4 個解決方案

解決方案1 0 2012-11-16 15:18:50

解決方案2 0 2012-11-16 15:37:50

解決方案3 0 2012-11-16 16:09:08

解決方案4 -1 2012-11-16 15:20:18

解決方案1
0 2012-11-16 15:18:50

解決方案2
0 2012-11-16 15:37:50

解決方案3
0 2012-11-16 16:09:08

解決方案4
-1 2012-11-16 15:20:18