【问题标题】:Checkboxes ticked if user selects certain options如果用户选择某些选项,则勾选复选框
【发布时间】:2012-11-16 15:07:01
【问题描述】:

我有问题。我希望我的 javascript 文件查找用户是否选择了“否”,他们不想要屏蔽,如果选择了“弧”,那么它应该勾选复选框 1。同样适用于“否”和“Ely”勾选复选框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;
}

【问题讨论】:

  • 您的 if 语句有问题 - 例如,("arc") 只是字符串值“arc”,它不会产生您期望的结果(它总是评估为真)。
  • 哦,我认为它获得了那个选项的值,在这种情况下是奥术。你可以编辑它,让它可以工作。
  • 你必须这样做:if (what.value == ("noShield") &amp;&amp; document.getElementById("chooseShield").value == "arc") {。这有意义吗?
  • 谢谢,确实有效。但它只有在您选择 Arc 然后选择 No 后才有效。这是为什么呢?
  • 因为您已将 showTicks 设置为仅在 likeShieldchange 事件上运行,因此该函数仅在您更改该选择时执行。如果您希望 showTicks 在每次选择更改时运行,您需要将其附加到所有选择的更改事件中。

标签: javascript html html-lists


【解决方案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 选择的change 事件,因此每当用户更改该下拉列表中的选择时,它都会运行附加函数。

【讨论】:

  • 好的,谢谢您的回复。您能否以 JavaScript 形式显示以上内容,因为它更容易理解,谢谢。
  • 这是 JavaScript; jQuery 是一个 JS 库,它使诸如 DOM 查询和事件之类的事情变得更容易。我将进行编辑以说明我的意思。
  • 你最好从头开始,尝试先阅读一些关于 js/Jquery 的文档
  • 嗨,以利亚,我在第一篇文章(编辑)中提出的 javascript 代码是正确的,但是它不起作用
【解决方案2】:

我会使用 jQuery。结帐working demo

在 change-event 读取选定的值,比较并设置 checkox。

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

function tickBoxes() {

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

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

【讨论】:

  • 嗨,大卫。感谢您的回复。使用普通 JavaScript 执行此操作会不会太难,如果我使用您的解决方案,我会使用 IF 语句
  • 嗨垫。一般来说:只做纯 JavaScript 你可能会遇到浏览器特定的问题。这一切都由 jQuery 处理。代码更短更干净。一旦开始使用 jQuery,您将不会切换回来。试一试。
【解决方案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;
   }

 }

【讨论】:

  • 您好,感谢您的回复。您可以尝试在没有 JQuery 的情况下执行此操作,以便我理解它。谢谢。
  • 喜欢我在第一篇文章中的版本。
  • @Pat 检查我已经按照您的建议更新了答案,只使用 javascript 而不使用 jquery。
【解决方案4】:

您应该创建一个能够修改/检查 DOM 的 Javascript 脚本(内联或非内联)。

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

【讨论】:

  • 您在这里提供的有用信息为零。这不是答案。
  • 我们能提供的唯一信息是关于 Javascript 或 Jquery 核心概念的文档
  • 我有一个外部文件:
  • 我认为一个基本的例子是有序的。
  • 那你为什么不回答这个问题呢?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-03-03
  • 2012-06-29
  • 1970-01-01
  • 1970-01-01
  • 2013-05-23
  • 1970-01-01
  • 2020-06-22
相关资源
最近更新 更多