Question

我有问题。我希望我的javascript文件能够找到用户是否选择“否”他们不想要盾牌，如果选择“Arc”则应该勾选checkbox1。同样适用于“否”和“伊利”刻度复选框4。 “No”和“Spec”也勾选checkbox7。但如果他们选择“不”和“任何”他们可以选择任何东西。我该怎么做呢。

HTML code：

<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>

这会将处理程序附加到change select的likeShield事件，因此每当用户更改该下拉列表中的选择时，它都会运行附加函数。

Answer 2

我会使用jQuery。结帐working demo。

在更改事件中读取所选值，比较并设置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

您应该创建一个能够修改/检查DOM的Javascript脚本（内联与否）。

你的答案在这里：http://docs.jquery.com/How_jQuery_Works

如果用户选择某些选项，则勾选复选框

4 个答案: