RoR jQuery檢查/取消選中特定項目

我目前正在構建RoR網頁。我正在嘗試構建一個複選框，以幫助在選中時選擇表單中的某些選項。當複選框未選中時，它將自動取消選中所選的選項。RoR jQuery檢查/取消選中特定項目

例如：

 <form id='list'><br> 
      1<input type='checkbox' value='1' /> 
      2<input type='checkbox' value='2' /> 
      3<input type='checkbox' value='3' /> 
      4<input type='checkbox' value='4' /> 
      5<input type='checkbox' value='5' /> 
      CheckAnimal<input type='checkbox' name='checkanimal' onclick='checkAnimal()'><br> 
     </form>

和JavaScript：

<script language='JavaScript'> 
     function checkAnimal() { 
      var values = ['1', '2', '4', '5']; 
      if (checked == false){checked = true}else{checked = false} 
      $("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", true); 
     } 
    </script>

在JavaScript中，而不if (checked == false){checked = true}else{checked = false}，選項（1,2,4,5）將在「CheckAnimal」點擊時，可以選擇複選框。但是，如果我將代碼添加回來，該複選框將不起作用。

順便說一下，這些代碼只能在JSFiddle中工作，並且在我的本地環境中不起作用，我不知道爲什麼。

的jsfiddle：http://jsfiddle.net/yddq6/

的代碼都在文件「_form.html.erb」和谷歌CDN（jQuery的1.10.2）<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head>）是.erb文件中。

請幫助！

來源

2013-12-20 TiHuan

非常感謝您解決我的問題，大家好！我希望我可以選擇你們兩個作爲最佳答案。兩種解決方案都可以完美地工作:)自從他早些時候發佈他的解決方案以來，我「最好的回答」再次感謝您的一切。真的很感激它！ – TiHuan

你們知道爲什麼這些代碼在我的本地環境中不起作用嗎？我在http://0.0.0.0:3000/上使用chrome來測試函數，並且它只在JSFiddle中不起作用。代碼在「_form.html.erb」中。感謝你的嚮導工作！ – TiHuan

爲什麼不設置兩個不同的情況，爲什麼不將4個複選框設置爲您嘗試匹配的複選框的相同狀態？

function checkAnimal() { 
var values = ['1', '2', '4', '5']; 
$("#list").find('[value=' + values.join('], [value=') + ']').prop("checked", 
$("#checkAnimalCheckbox").prop("checked")); // Instead of true, pass the value of the CheckAnimal Checkbox 
}

並在您的HTML中添加一個ID以挑選特殊複選框。

<input type='checkbox'ID="checkAnimalCheckbox" name='checkanimal' onclick='checkAnimal()'>

這裏有一個改裝成的jsfiddle你：http://jsfiddle.net/yddq6/1/

來源

2013-12-20 02:05:33

這是因爲在你的代碼，沒有定義checked，它應該是element.checked，你也應該元素傳遞給你的函數：

<input type='checkbox' name='checkanimal' onclick='checkAnimal(this)'> 

function checkAnimal(elem) { 
     var values = ['1', '2', '4', '5']; 
     if (elem.checked == false) { 
      var checked = true 
     } else { 
      var checked = false 
     } 
     $("#list").find('[value=' + values.join('], [value=') + ']') 
       .prop("checked", checked); 
}

但我會用.on()和.filter()方法：

$('input[name="checkanimal"]').on('change', function() { 
    $("#list input").filter(function() { 
     return $.inArray(this.value, values) > -1; 
    }).prop("checked", this.checked); 
});

http://jsfiddle.net/yddq6/2/

來源

2013-12-20 02:08:08 undefined

RoR jQuery檢查/取消選中特定項目

回答

相關問題